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图 Facebook 前 端 工程 师 15 年 一 线 开 发 经 验 凝结 
图 深入 探讨 React 核 心 模式 与 组 件 ， 创 建 可 复 用 的 代码 和 可 扩展 的 设计 
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内 容 提要 


本 书 共 分 为 12 章 ， 通 过 介绍 React 中 最 有 价值 的 设计 模式 ， 展 示 如 何 将 设计 模式 和 最 佳 实践 应 用 于 现 
实 的 新 项 目 和 已 有 项 目 中 。 主 要 内 容 包括 帮助 读者 理解 React 的 基本 概念 ， 学 习 编写 整洁 、 可 维护 的 代码 ; 
优化 React 组 件 ， 使 应 用 拥有 更 快 的 速度 和 响应 性 ; 介绍 如 何 有 效 地 编写 测试 ， 避 免 反 模式 ， 开 源 组 件 并 
对 React 生态 系统 做 贡献 。 

本 书 适 合 想 要 深入 理解 React， 希 望 提高 相关 编程 技能 的 前 端 开发 人 员 阅 读 。 
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整个 应 用 中 复 用 的 组 伯 

















本 书 将 带 你 全 面 了 解 React 中 最 有 价值 的 设计 模式 ， 并 展示 如 何在 全 新 或 已 有 的 真实 项 目 中 
设计 模式 与 最 佳 实践 。 本 书 将 帮助 你 让 应 用 变 得 更 加 灵活 、 运 行 更 流畅 并 且 更 容易 维护 一 一 
在 不 降低 质量 的 情况 下 极 大 地 提升 工作 流 的 速度 。 






































日 的 表单 。 


接 下 来 ,我们 会 为 React 组 件 编写 样式 并 优化 组 件 ， 从 而 使 应 用 运行 得 更 快 且 更 具 响 应 性 。 
最 后 ， 我 们 将 有 效 地 编写 测试 代码 ， 还 会 学 到 如 何 为 React 及 其 生态 系统 做 贡献 。 
学 完 本 书后 , 你 会 








我 们 将 首先 理解 React 的 内 部 原理 ， 接 着 逐步 编写 整洁 且 可 维护 的 代码 。 我 们 将 开发 能 够 在 
， 拱 建 应 用 架构 ， 并 创建 真正 可 月 





本 书 内 容 








从 大 量 的 试 错 以 及 开发 难题 中 解脱 出 来 , 也 将 踏 上 成 为 React 专家 的 道路 。 


第 1 章 ，React 基础 。 这 一 章 从 高 级 角度 介绍 了 React 的 基本 概念 。 





第 2 章 ， 整 理 代 码 。 这 一 章 讲解 了 编写 可 维护 代码 中 最 重要 的 一 个 方面 ， 即 保持 代码 整洁 并 
遵循 编程 风格 指南 。 了 解 函数 式 编程 的 基础 知识 对 于 使 朋 











日 React 也 很 重要 。 
要 想 保 持 代 码 库 整洁 且 可 维护 ， 最 重要 的 是 开发 真正 可 复 用 的 组 件 。 


第 3 章 ， 开发 真正 可 复 用 的 组 件 。 这 一 章 曾 述 了 构建 应 用 的 一 个 关键 因素 在 于 使 用 组 件 ， 而 



































第 4 章 , 组 合 一 切 。 这 一 章 阐 述 了 真实 应 用 由 不 同 的 组 件 构 成 , 重要 的 是 让 组 件 之 间 可 以 高 
效 地 通信 ， 并 按照 正确 的 形式 组 织 和 搭建 层次 结构 。 





介绍 了 不 同 的 技巧 和 方法 ， 让 人 
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第 5 章 ,恰当 地 获取 数据 。 这 一 章 指 明了 任何 客户 端 应 用 在 某 些 时 刻 都 必须 处 型 
尔 能 够 以 React 的 方式 获取 数据 。 
一 些 高 级 概念 ， 如 事 从 








数据 ， 并 且 
第 6 章 , 为 浏览 器 编写 代码 。 这 一 章 曾 述 了 如 何 正确 使 用 在 浏览 器 中 运行 的 应 用 ,还 讲解 了 
动画 以 及 如 何 与 DOM 交互 。 


第 7 章 ， 美 化 组 件 。 这 一 章 说 明了 开发 美观 的 UI 组 件 是 前 端 工 程 中 很 重要 的 一 部 分 内 容 。 











React 可 以 通过 多 种 方式 实现 这 个 目的 ， 每 种 方式 从 不 同 角度 解决 该 问题 。 了 解 可 用 的 库 及 其 工 
作 原 理 ， 对 于 做 出 正确 的 选择 至 关 重 要 。 


第 8 章 ， 服 务 端 泻 染 的 乐趣 与 益处 。 这 一 章 指明 了 服务 端 泻 染 是 React 众多 优秀 特性 之 一 。 
虽然 该 特性 开 箱 即 用 ， 但 学 习 其 正确 用 法 很 重要 ， 因 为 这 样 才能 充分 加 以 利用 


第 9 章 ， 提 升 应 用 性 能 。 这 一 章 曾 述 了 性 能 是 Web 平台 吸引 用 户 的 重要 因素 之 一 。React 提 
供 了 一 系列 工具 和 技术 来 创建 快 如 闪电 的 应 用 ， 这 一 音 将 全 面 介 绍 这 些 内 容 。 


第 10 章 ， 测 试 与 调试 。 这 一 章 会 让 你 意识 到 ， 我 们 都 希望 自己 的 应 用 保持 稳定 ， 并 且 能 够 
应 对 一 切 极端 情况 ,而 测试 有 助 于 实现 这 个 目的 。 编写 全 面 的 测试 集 对 于 创建 稳定 且 可 维护 的 代 
码 至 关 重 要 。 从 另 一 方面 来 看 ，bug 总 会 出 现 ， 而 知道 如 何 调 试 并 尽早 发 现 问题 很 关键 。 

第 11 章 ， 需 要 避免 的 反 模 式 。 这 一 章 曾 明了 开发 人 员 经 党 尝试 采取 捷径 和 创意 方案 这 一 事 
实 , 但 在 某 些 情况 下 这 种 做 法 对 应 用 来 说 是 很 危险 的 , 尤其 是 团队 以 及 代码 库 规模 很 大 时 。 这 一 
章 将 带 你 了 解 使 用 React 时 ， 应 该 避免 的 常见 反 模 式 。 

第 12 章 ， 未 来 的 行动 。 这 是 本 书 的 最 后 一 音 ， 至 此 我 们 已 经 介绍 完 所 有 主题 。 我 认为 探讨 
如 何 开 源 组 件 ( 以 回馈 社区 ) 以 及 如 何 为 React 及 其 生态 系统 做 贡献 也 很 重要 。 
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阅读 须知 
我 们 需要 一 台 计 算 机 ， 并 配 有 终端 程序 、Node.jsmpm 环境 以 及 浏览 器 。 


目标 读者 
如 果 想 要 深入 理解 React 并 将 其 应 用 到 真实 应 用 的 开发 中 ， 那 么 本 书 很 适合 你 。 








排版 约定 
本 书 采用 不 同 的 文本 样式 来 区 分 不 同类 别 的 信息 。 以 下 展示 了 部 分 样式 示例 及 其 相应 的 


全 Ws 

正文 中 的 代码 、 数 据 库 表 名 、 用 户 输入 等 采用 以 下 样式 :“ 循 环 内 部 包含 一 些 条 件 逻 辑 ， 用 
于 检查 #first 和 #1ink 属性 是 否 存 在 , 并 根据 它们 的 值 演 染 不 同 的 HTML 片段 。 变量 位 于 双 花 
括号 中 。” 


代码 块 的 样式 如 下 所 示 : 
































const toLowerCase = input => { 
eonst output a7 {] 
for (let i = 0; i < input.length; i++) { 
output.push (input{[i].toLowerCase()) 
} 


return output 


} 
命令 行 中 的 输入 或 输出 内 容 采 用 以 下 样式 : 
npm install -g create-react-app 


新 术语 和 关键 词 以 黑体 字 显 示 。 屏幕 上 出 现 的 单词 (如 出 现在 菜单 或 对 话 框 中 ) 按照 如 下 样 
式 显 示 :“ 我 们 开始 更 新 测试 代码 ， 先 从 泻 染 文本 的 那些 代码 着 手 。” 














人 警告 或 重要 的 注意 事项 。 
CO 寺 或 小 技巧 。 


读者 反馈 

我 们 期 待 读者 的 反馈 。 告 诉 我 们 你 对 本 书 的 看 法 ,喜欢 什么 或 者 不 喜欢 什么 。 读 者 反馈 对 我 
们 很 重要 ， 因 为 它 有 助 于 我 们 策划 出 令 读 者 受益 最 多 的 图 书 。 

要 想 提 供 反馈 ， 只 需 登录 “图 灵 社 区 ”本 书页 面 (http://www.ituring.com.cn/book/2007 ) 并 留言 。 





客户 支持 
为 了 让 你 购买 的 书 物 有 所 值 ， 我 们 还 为 你 准备 了 以 下 内 容 。 





下 载 示例 代码 
你 可 以 从 “图 灵 社 区 ”本 书页 面 (http:/www.ituring.com.cn/book/2007 ) 下 载 书 中 示例 代码 。 
下 载 文件 后 ， 确 保 使 用 以 下 工具 的 最 新 版 本 来 解压 或 提取 文件 夹 : 








口 WinRAR /7-Zip ( Windows ) 
OD Zipeg/iZip/ UnRarX (Mac ) 
OD 7-Zip /PeaZip (Linux ) 





勘误 


虽然 我 们 竭力 确保 图 书 内 容 的 正确 性 , 但 错误 在 所 难免 。 如 果 你 在 我 们 出 版 的 任何 一 本 图 书 
中 发 现 了 文本 或 代码 中 的 错误 ,， 和 希望 你 能 告知 我 们 , 我 们 将 非常 感激 。 你 的 善举 足以 减少 其 他 读 
者 在 阅读 出 错 内 容 时 的 纠结 和 不 快 ， 并 帮助 我 们 在 后 续 版 本 中 更 正 错误 。 如 果 你 发 现任 何 错误 ， 
请 通过 “图 灵 社 区 ”本 书页 面 (http://www.ituring.com.cn/book/2007 ) 告诉 我 们 。 一 旦 勘误 通过 确 
认 ， 将 显示 在 页 面 上 的 勘误 表 中 。 


























侵权 行为 

所 有 媒体 在 互联 网 上 都 面临 着 侵权 问题 。 我 们 严格 保护 自己 的 版 权 和 许可 证 。 如 果 你 在 互联 
网 上 发 现 有 关 我 们 出 版 物 的 任何 形式 的 盗版 产品 ,请 立即 告知 我 们 地 址 或 网 站 名 称 ， 以 便 我 们 进 
行 补 救 。 

请 将 盗版 图 书 的 网 站 地 址 发 送 到 ebook@turingbook.com。 


你 的 反 盗 版 行动 就 是 在 保护 作者 和 出 版 社 ， 只 有 这 样 , 我 们 才能 继续 以 优质 内 容 回馈 像 你 这 
样 的 热心 读者 。 














问题 


如 果 对 本 书 存 有 任何 方面 的 疑问 ， 可 以 通过 “图 灵 社 区 ”本 书页 面 (http://www.ituring.com. 
cn/book/2007 ) 联系 我 们 ， 我 们 将 尽力 为 你 答疑 解 惑 。 
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你 好 ! 
本 书 假设 你 已 经 知道 React 是 什么 并 且 了 解 它 能 为 你 解决 什么 问题 。 你 可 能 使 用 React 开发 
过 中 小 型 应 用 ,但 希望 进一步 提升 自己 的 技能 并 得 到 所 有 未 解决 问题 的 答案 。 
你 应 该 知道 ，React 由 Facebook 的 开发 人 员 及 JavaScript 社区 的 数 百 名 贡献 者 所 维护 。 
React 是 最 流行 的 UI 开发 库 之 一 ， 因 高 性 能 而 为 人 所 熟知 ， 这 得 益 于 它 操作 DOM 的 方式 很 
巧妙 。 
React 包含 了 全 新 的 JSX 语法 ， 该 语法 用 于 在 JavaScript 中 编写 标记 ， 这 需要 你 重新 思考 关 
注 点 分 离 原则 "。React 还 包含 了 许多 很 棒 的 特性 , 如 服务 端 泻 染 , 该 特性 让 你 可 以 开发 通用 应 用 。 
为 了 学 习 本 书 ， 你 需要 了 解 如 何 使 用 终端 程序 在 Node.js 环境 中 安装 并 运行 npm 包 。 
本 书 中 的 所 有 代码 示例 都 遵循 ES2015 标准 ， 以 方便 你 阅读 与 理解 。 
本 章 会 讲解 你 需要 掌握 的 一 些 基本 概念 ， 了 解 这 些 概 念 有 助 于 你 高 效 使 用 React。 对 于 初学 
者 来 说 ， 理 解 这 些 概 念 意义 重大 。 
口 命令 式 编程 与 声明 式 编程 的 区 别 。 
口 React 组 件 与 组 件 实 例 ， 以 及 React 如 何 使 用 元 素来 控制 UI 流程 。 
口 React 如 何 改变 Web 应 用 的 开发 方式 , 它 主张 的 另 一 种 全 新 的 关注 点 分 离 概念 是 什么 , 它 
选择 不 寻常 的 设计 理念 的 原因 是 什么 。 
口 为 什么 人 们 会 对 JavaScript 框架 感到 疲劳 ? 在 React 生 态 系 统 中 ， 怎样 避 免 开发 人 员 最 常 
犯 的 错误 ? 


















































Q@ 关注 点 分 离 是 软件 设计 原则 之 一 ， 前 端 开发 中 一 般 指 文档 结构 、 样 式 表现 以 及 脚本 行为 的 分 离 。 一 一 译 者 注 
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1.1 声明 式 编 程 


只 要 阅读 过 React 文档 或 者 相关 博文 ， 那 么 你 肯定 遇 到 过 声明 式 这 一 术语 。 











其 实 ，React 如 此 强大 的 原因 之 一 就 在 于 它 推行 声明 式 编 程 范式 。 























因此 ， 要 想 掌握 React， 就 需要 理解 声明 式 编程 的 含义 ， 以 及 其 与 命令 式 编程 之 间 的 主要 
































理解 该 问题 的 最 简 方式 
么 目的 。 


: 命令 式 
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程 描述 代码 如 何 工 作 , 而 声明 式 编程 则 表明 想 要 实现 什 
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与 命令 式 世 界 极其 相似 的 一 个 真实 示例 就 是 去 酒吧 喝 啤酒 并 对 服务 员 做 出 以 下 指示 : 
口 从 架子 上 拿 一 个 玻璃 杯 ; 

口 将 杯子 放 到 酒 桶 前 ; 

口 按 下 酒 桶 开关 ， 将 杯子 倒 满 ; 

口 把 杯子 递 给 我 。 


日 在 声明 式 世 界 中 ， 你 只 需要 说 :“ 请 给 我 一 杯 啤酒 。” 


















































按 声明 式 方式 点 一 杯 啤酒 , 需要 假设 服务 员 知 道 如 何 提 供 啤 酒 , 这 是 声明 式 编程 工作 原理 的 
一 个 重要 方面 。 











我 们 来 看 一 个 JavaScript 代 码 的 示例 。 编 写 一 个 简单 函数 ， 给 定 包含 大 写字 符 串 的 数组 时 ， 
该 函数 返回 包含 相同 的 小 写字 符 串 的 数组 。 








toLowerCase(['FOO', 'BAR']) // ['foo', 'bar' 
解决 该 问题 的 命令 式 函 数 的 实现 如 下 所 示 : 
const toLowerCase = input => { 


onstr OUEDUE SS [: 

for (let i = 0; i < input.length; i++) { 
output.push (input[i] .toLowerCase()) 

} 

return output 


} 


首先 , 创建 一 个 空 数组 来 保存 结果 。 接 着 ,函数 循环 遍历 输入 数组 中 的 所 有 元 素 ， 并 将 小 写 
值 推进 空 数组 中 。 最 后 ， 返 回 需要 输出 的 数组 。 


声明 式 实现 如 下 所 示 : 








const toLowerCase = input => input.map( 
Value => Value.toLowerCase () 


) 
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输入 数组 中 的 元 素 会 传递 到 map 函数 ， 然 后 map 函数 会 返回 包含 小 写 值 的 新 数组 。 
这 里 需要 注意 几 点 比较 重要 的 差别 : 前 一 个 示例 不 够 优雅 ， 而 且 需 要 花 更 多 精力 才能 理解 ; 








后 者 更 加 简洁 、 易 读 ， 这 对 注重 可 维护 性 的 大 型 代码 库 来 说 非常 重要 。 






































另外 值得 一 提 的 是 ， 声 明 式 编程 中 无 须 使 用 变量 ， 也 不 用 在 执行 过 程 中 持续 更 新 变量 的 值 。 





山中 








有 实 上 ， 声 明 式 编程 往往 避免 了 创建 和 修改 状态 。 





我 们 来 看 最 后 一 个 示例 ， 了 解 一 下 React 的 声明 式 具体 指 什么 。 
我 们 要 解决 的 问题 是 Web 开发 中 常见 的 一 个 需求 : 展示 带 有 标记 的 地 图 。 


JavaScript 的 实现 (使 用 Google Maps SDK ) 如 下 所 示 : 











const map = new google.maps.Map (qQqocument .getElementById('map')，({ 
Zoom: 4, 
center: myLatLng, 

} 


const marker = new google.maps.Marker ({ 
position: myLatLng, 
title: 'Hello World!', 

} 

marker.setMap (map) 


这 显然 是 命令 式 的 ， 因 为 代码 逐条 描述 了 创建 地 图 、 创 建 标记 以 及 在 地 图 上 添加 标记 的 指令 。 


改 用 React 组件 在 页 面 上 显示 地 图 的 方式 如 下 所 示 : 


<Gmaps Zoom={4} center={myLatLng}> 
<Marker position={myLatLng} title="Hello world!" /> 
</Gmaps> 


使 用 声明 式 编程 方法 时 , 开发 人 员 只 需要 描述 他 们 想 要 实现 什么 目的 , 无 须 列 出 实现 效果 的 





所 有 步 又 。 





声明 式 编 程 方式 使 得 React 很 容易 使 用 , 因此 最 终 的 代码 也 很 简单 , 这 样 产生 的 bug 也 更 少 ， 





可 维护 性 也 更 强 。 


1.2 ”React 元 素 


本 书 假设 你 已 经 熟悉 组 件 及 其 实例 ， 但 要 想 高 效 地 使 用 React， 你 还 需要 了 解 另 一 种 对 象 : 


元 素 。 
































无 论 是 调用 createclass 方法 、 继 承 component 类 还 是 声明 一 个 无 状态 函数 ， 其 实 都 是 


在 创建 组 件 。React 管理 着 运行 环境 中 的 所 有 组 件 实例 ， 在 某 个 特定 时 刻 ， 内 存 中 可 能 存在 同一 
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个 组 件 的 多 个 实例 。 


如 前 文 所 述 ，React 遵循 声明 式 范式 ， 因 此 无 须 告 诉 它 如 何 与 DOM 交互 。 你 只 要 声明 希望 
在 屏幕 上 看 到 的 内 容 ，React 就 会 完成 剩 下 的 工作 。 


或 许 你 之 前 体会 过 ， 大 部 分 其 他 UI 库 都 是 按 相 反方 式 工作 的 : 它们 让 开发 人 员 负 责 更 新 界 
面 ， 这 就 需要 手动 管理 DOM 元 素 的 创建 与 销毁 。 


React 使 用 了 元 素 这 种 特殊 类 型 的 对 象 来 控制 UI 流程 。 元 素描 述 了 屏幕 上 需要 显示 的 内 容 。 
这 些 不 可 变 对 象 比 组 件 和 组 件 实例 要 简单 得 多 ， 而 且 只 包含 了 展示 界面 所 必需 的 信息 。 


以 下 示例 展示 了 一 个 元 素 : 















































{ 
type: Title, 
props: { 
color: 'red', 
children: 'Hello, Title!' 
} 
} 


元 素 最 重要 的 属性 是 type， 另 一 个 比较 特殊 的 属性 是 chilaren， 它 是 可 选 的 ， 用 于 表示 
元 素 的 直接 后 代 。 当 然 ， 元 素 还 具有 其 他 一 些 属 性 。 


type 属性 很 重要 , 因为 它 告诉 React 如 何 处 理 元 素 本 身 。 实 际 上 , 如 果 type 属性 是 字符 串 ， 
那么 元 素 就 表示 DOM 节点 ; 如 果 type 属性 是 函数 ， 那 么 元 素 就 是 组 件 。 


DOM 元 素 和 组 件 可 以 互相 骨 套 ， 以 表示 整个 泻 染 树 : 





















































Ud 











{ 
type: Title, 
props: { 
color: 'red', 
Shildrerr:- 
type: 'hil', 
Drops: +{ 
children: 'Hello, Hl1!' 
} 
} 
} 


当 元 素 的 type 属性 是 函数 时 ,React 会 调用 它 , 传人 props 来 取 回 底层 元 素 。React 会 一 直 
对 返回 结果 递归 地 执行 相同 的 操作 , 直到 取 回 完整 的 DOM 节点 树 , 然后 就 可 以 将 它 演 染 到 屏幕 。 
这 个 过 程 称 作 一 致 性 比较 ，React DOM 和 React Native 都 利用 它 在 各 自 的 平台 上 创建 UI。 
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1.3 ”忘掉 所 学 的 一 切 Eo | 


初次 使 用 React 需 要 持 开 放 的 心态 ,因为 它 带 来 了 设计 Web 应 用 和 移动 应 用 的 一 种 全 新 方式 。 
实际 上 ，React 试 图 打破 我 们 熟知 的 大 部 分 最 佳 实践 ， 并 革新 UI 的 构建 方式 。 


过 去 的 20 年 里 ,我 们 学 到 了 十 分 重要 的 关注 点 分 离 原则 ， 并 习惯 性 地 将 其 理解 为 从 模板 中 
分 离 逻辑 。 我 们 的 目标 始终 是 将 JavaScript 和 HTML 写 入 不 同文 件 。 


各 种 各 样 的 模板 方案 被 创建 出 来 ， 以 帮助 开发 人 员 实 现 这 个 目标 。 


问题 在 于 ， 这 种 形式 的 分 离 大 多 数 情 况 下 只 是 一 种 假象 。 真 相 是 ， 无 论 JavaScript 和 HTML 
写 在 什么 地 方 ， 它 们 都 是 紧密 耦合 的 。 


我 们 来 看 一 个 模板 的 示例 : 


{{#items}} 
{{#first}} 
<li><strong>{{name}}</strong></1i> 
{{/first}} 
{{#1ink}} 
<1i><a href="{{url}}">{{name}}</a></1i> 
{{/link}} 
{{/items}} 


以 上 代码 段 摘自 Mustache 官网 ， 它 是 最 流行 的 模板 系统 之 一 。 


第 一 行 代码 让 Mustache 循环 遍历 项 目 集合 。 循 环 内 部 包含 了 一 些 条 件 逻 辑 ， 以 检查 #first 
和 #1ink 属性 是 否 存在 ， 并 根据 它们 的 值 渔 染 不 同 的 HTML 片段 。 变 量 位 于 双 花 括号 中 。 


如 果 应 用 只 需要 显示 一 些 变量 , 那么 模板 库 就 是 很 好 的 解决 方案 , 但 需要 操作 复杂 的 数据 结 
构 时 ， 情 况 就 不 一 样 了 。 


实际 上 ， 模 板 系统 及 其 领域 专用 语言 ( domain-specific language，DSL ) 提供 了 一 个 功能 
集 ， 它们 试图 提供 一 门 真正 编程 语言 的 功能 ， 而 又 不 用 像 语 言 那样 完备 。 


如 以 上 示例 所 示 ， 模 板 高 度 依赖 从 逻辑 层 接收 到 的 数据 模型 来 显示 信息 。 


另 一 方面 ，JavaScript 操作 模板 泻 染 出 的 DOM 元 素来 更 新 UI， 即 使 它们 是 从 独立 文件 中 加 
载 的 。 

样式 也 存在 同样 的 问题 : 它们 定义 在 不 同 的 文件 中 ， 但 模板 引用 了 样式 文件 ， 而 且 CSS 选 
择 右 也 遵循 了 文档 标记 结构 ， 因 此 ， 几 乎 不 可 能 在 不 影响 其 他 文件 的 前 提 下 修改 某 个 文件 。 这 就 
是 耦合 的 定义 。 


这 就 是 为 何 传统 的 关注 点 分 离 原 则 更 像 是 技术 分 离 , 这 种 做 法 当然 说 不 上 不 好 , 但 没有 解决 
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任何 真正 问题 。 

React 尝试 更 进一步 ， 将 模板 放 到 其 所 属 位置 ， 即 与 逻辑 在 一 起 。React 这 么 做 的 理由 在 于 ， 
它 建 议 你 通过 编写 名 为 组 件 的 小 型 代码 块 来 组 织 应 用 。 

框架 不 应 该 指导 你 如 何 分 离 关 注 点 , 因为 每 个 应 用 都 有 自己 的 方式 , 只 有 开发 人 员 才 能 决定 
如 何 划 分 应 用 的 界限 。 

组 件 式 开发 彻底 改变 了 Web 应 用 的 开发 方式 ， 这 也 是 关注 点 分 离 这 一 经 典 概念 未 渐 被 更 现 
代 化 的 架构 所 代替 的 原因 。 

React 所 主张 的 范式 并 不 新 奇 ， 也 不 是 由 React 的 开发 人 员 所 发 明 的 , 但 是 React 为 这 个 概念 
的 主流 化 做 出 了 巨大 贡献 。 最 重要 的 是 , 不同 专 业 水 平 的 开发 人 员 都 能 够 轻松 理解 这 个 概念 , 它 
也 因此 流行 起 来 。 

React 组件 的 泻 染 方法 如 下 所 示 : 

render() { 


return ( 
<button style={{ color: 'red' }} onClick={this.handleClick}> 


Click me! 
</button> 
) 


一 开始 都 会 觉得 这 种 语法 有 些 奇怪 ， 不 过 这 只 是 因为 我 们 还 没有 习惯 而 已 。 

一 旦 学 会 ， 我 们 就 会 意识 到 它 的 强大 之 处 并 理解 其 潜力 。 

同时 使 用 JavaScript 来 编写 逻辑 和 模板 不 但 有 助 于 更 好 地 分 离 关 注 点 ， 也 赋予 我 们 更 强 的 能 
力 和 表达 力 ， 这 正 是 构建 复杂 UI 所 必需 的 。 

所 以 ， 即 使 混用 JavaScript 和 HTML 的 做 法 乍 听 起 来 很 奇怪 ， 也 请 花 $ 分 钟 试 用 React。 

学 习 新 技术 的 最 佳 方式 是 在 小 项 目 中 试用 ,并 观察 具体 的 应 用 情况 。 一 般 来 说 ， 如 果 新 技术 
能 带 来 长 远 利 益 ， 那 么 正确 的 做 法 就 是 忘掉 学 过 的 一 切 并 改变 思维 模式 。 

此 外 ， 开 发 React 的 工程 师 一直 在 社区 中 推广 另 一 个 概念 : 将 样式 的 逻辑 也 放 到 组 件 中 。 这 
个 概念 颇具 争议 ， 而 且 很 难 被 接受 。 

React 的 最 终 目标 是 将 创建 组 件 所 用 到 的 每 项 技术 都 封装 起 来 ， 并 根据 它们 的 领域 和 功能 进 
行 关注 点 分 离 。 

以 下 示例 展示 了 React 文档 中 的 一 个 样式 对 象 : 




















































































































var divStyle = { 
color: 'white', 





backgroundImage: 'url(' + imgUrl + ')', 

WebkitTransition: 'all'，// 注意 此 处 大 写 的 'W' 

msTransition: 'all' // | 是 唯一 小 写 的 厂商 前 级 
下 


ReactDOM.render ( 
<div style={divStyle}>Hello World!</div>, 
mountNode 


); 
开发 者 使 用 JavaScript 编写 样式 的 这 套 方案 称 作 CSS in JavaScript。 第 7 章 将 对 其 进行 详细 介绍 。 























1.4 常见 误解 





一 种 常见 的 观点 认为 ，React 是 一 个 庞大 的 技术 和 工具 集 ， 要 想 使 用 它 ， 就 必须 与 包 管理 器 、 
转译 器 、 模 块 打包 器 以 及 无 数 的 库 打 交道 。 
这 种 观念 相当 普遍 ， 人 们 口 口 相传 ,以 至 于 它 有 了 明确 的 定义 , 还 被 赋予 了 JavaScript 疲劳 
名 称 。 

理解 这 种 观念 背后 的 缘由 并 不 难 。 实 际 上 ，React 生态 系统 中 的 所 有 代码 仓库 和 类 库 都 源 自 
炫 酷 的 新 技术 、 最 新 版 的 JavaScript 以 及 最 先进 的 技术 和 范式 。 
此 外 ,，GitHub 上 还 有 大 量 的 React 构建 模板 ， 每 个 模板 都 包含 了 数 十 个 能 够 解决 各 种 问题 的 
依赖 项 [oy 

这 很 容易 让 人 觉得 使 用 React 就 一 定 要 使 用 这 些 工具 ,但 事实 并 非 如 此 。 


虽然 人 们 普遍 持 有 以 上 观点 , 但 React 其 实 是 一 个 很 小 的 库 。 像 之 前 使 用 jQuery 或 Backbone 
那样 ， 我 们 可 以 在 任何 页 面 (甚至 JSFiddle ) 中 使 用 它 : 只 要 在 关闭 主体 元 素 前 引入 脚本 即 可 。 


实际 需要 引入 两 个 脚本 ， 因 为 React 拆 分 成 了 两 个 包 : 核心 包 react 实现 了 React 库 的 核心 
特性 ，react-dom 则 包含 了 与 浏览 器 相关 的 所 有 特性 。 这 样 做 的 理由 是 ， 核 心包 可 以 用 于 支持 
不 同 的 目标 平台 ， 如 浏览 器 中 的 React DOM 以 及 移动 设备 上 的 React Native。 


在 单个 HTML 页 面 中 运行 React 应 用 不 需要 任何 包 管 理 器 和 复杂 操作 。 只 需 下 载 发 行 包 并 托 
管 到 自己 的 服务 器 上 (或 者 使 用 https://unpkg.com )， 你 就 可 以 在 短 短 几 分 钟 内 开始 使 用 React 及 
其 特性 。 


要 想 使 用 React， 可 以 在 HTML 代码 中 添加 以 下 URL: 




































































口 https://cdn.bootess.com/react/15.3.2/react.min.]js 
口 https://cdn.bootcss.comyreact13.3.2/react-dom.min.js 
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如 果 只 引入 核心 包 , 则 无 法 使 用 JSX 语法， 因为 它 不 是 浏览 器 支持 的 标准 语言 。 不 过 ,重点 
在 于 先 从 最 小 特性 集 入 手 ， 需 要 时 再 加 入 更 多 功能 。 


对 于 简单 的 UI， 只 需 使 用 createElement 方法 。 只 有 当 开发 更 复杂 的 UI 时 ， 才 需要 引入 
转译 器 来 启用 JSX 语法 并 将 其 转换 成 JavaScript。 


一 旦 应 用 变 得 更 大 ， 就 需要 使 用 路 由 库 来 处 理 不 同 的 页 面 和 视图 。 与 上 同 理 ， 引 入 路 由 库 
即 可 。 


有 些 情况 下 , 我 们 需要 从 API 路 径 加 载 数据 。 如 果 应 用 继续 扩 增 ,就 需要 利用 外 部 依赖 项 对 
复杂 操作 进行 抽象 ， 此 时 才 应 该 引入 包 管理 器 。 


然后 就 需要 将 应 用 拆 分 成 独立 的 模块 并 按 正确 的 形式 组 织 文件 。 此 时 应 该 开始 考虑 使 用 模块 
打包 需 。 


使 用 这 种 非常 简单 的 方法 ， 就 不 会 再 感到 疲劳 了 。 

如 果 代 码 模板 带 有 数 百 个 依赖 和 数 十 个 npm 包 ， 不 熟悉 它们 必然 会 感到 不 知 所 措 。 

值得 注意 的 是 ， 与 编程 相关 的 每 种 工作 ( 特别 是 前 端 工程 ) 都 需要 持续 的 学 习 。Web 的 本 质 
决定 了 它 要 根据 用 户 与 开发 者 的 需求 快速 进化 与 改变 。 我 们 的 生态 环境 从 一 开始 就 按 这 种 方式 发 
展 ， 这 也 正 是 它 如 此 令 人 激动 的 原因 。 

积累 了 一 些 Web 开发 经 验 后 ,我 们 了 解 到 掌握 一 切 知识 是 不 可 能 的 ,但 应 该 用 正确 的 方法 
学 习 新 知识 , 以 避免 疲劳 感 。 只 要 能 跟 上 所 有 的 新 趋势 , 就 不 需要 为 了 掌握 新 类 库 而 实际 运用 它 ， 
除非 我 们 有 时 间 做 业余 项 目 。 

JavaScript 领域 很 令 人 吃惊 : 只 要 发 布 或 者 起 草 了 一 个 规范 ， 社 区 中 就 会 有 人 以 转译 需 搬 件 
或 腻子 脚本 的 形式 实现 它 ， 这 使 得 在 浏览 器 厂商 赞成 并 开始 支持 该 规范 前 ， 大 家 就 可 以 使 用 它 。 

以 上 事实 使 得 JavaScript 和 浏览 器 生态 环境 与 任何 其 他 语言 或 平台 完全 不 同 。 

其 弊端 是 一 切 变化 得 太 快 ， 不 过 问题 也 只 是 如 何在 押宝 新 技术 和 保持 稳妥 间 找 到 平衡 。 

任何 情况 下 ，Facebook 的 开发 人 员 都 很 注重 开发 体验 ,并且 善于 倾听 社区 反馈 。 因 此 ,尽管 
使 用 React 并 非 一 定 要 学 习 数 百 种 工具 ， 但 他 们 也 意识 到 了 这 种 令 人 疲劳 的 现象 ， 于 是 发 布 了 一 
个 CLI 工 具 ， 让 构建 和 运行 真正 的 React 应 用 变 得 非常 简单 。 


这 个 CLI 工具 只 需要 Node.jsnpm 环境 ， 然 后 就 可 以 全 局 安装 : 






























































































































































npm install -g create-react-app 
安装 好 这 个 可 执行 程序 后 ， 就 可 以 向 它 传递 文件 夹 名 称 来 创建 应 用 了 。 


Create-react-app hello-world 
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最 后 ， 执 行 ca hello-world 命令 进入 应 用 的 文件 来， 接着 运行 以 下 命令 : 
npm start 


应 用 神奇 地 只 靠 一 项 依赖 就 可 以 运行 了 ,但 包括 了 用 最 先进 的 技术 开发 完整 React 应 用 所 需 
的 一 切 特性 。 以 下 截图 展示 了 create-react-app 创建 的 应 用 的 默认 页 面 。 











密 


Welcome to React 





To get started, edit src/app.js and save to reload. 








本 书 将 利用 这 个 工具 运行 每 章 中 的 代码 示例 ， 你 也 可 以 在 本 书 主页 中 获取 它们 : http://www. 
ituring.com.cn/book/2007。 


1.5 小结 





我 们 在 本 音 中 学 习 了 一 些 基 本 概念 ， 它 们 对 于 学 习 后 续 章 节 很 重要 ， 对 于 平时 开发 React 应 
用 也 至 关 重 要 。 


现在 我 们 知道 了 如 何 编写 声明 式 代 码 ,并 清晰 地 理解 了 自己 开发 的 组 件 与 React 元 素 的 区 别 ， 
React 元 素 的 实例 会 显示 在 屏幕 上 。 

我 们 了 解 了 将 逻辑 和 模板 放 在 一 起 的 原因 ， 以 及 为 什么 这 种 不 太 流 行 的 决策 能 为 React 带 来 
巨大 成 功 。 

我 们 深入 探讨 了 为 什么 JavaScript 生态 系统 中 的 人 们 会 普遍 感到 疲劳 ， 也 研究 了 如 何 通过 和 迭 
代 的 方式 来 避免 这 些 问 题 。 

最 后 ， 我 们 探讨 了 新 的 CLI 工具 create-react-appo 现在 是 时 候 动手 编写 些 真 正 的 代 
但 了 。 





















































整理 代码 











本 章 假设 你 已 经 具有 JSX 语法 的 使 用 经 验 ， 并 且 和 希望 提升 自己 的 技能 以 高 效 使 用 它 。 














要 想 使 用 JSX 时 不 产生 任何 问题 或 不 可 预测 的 行为 ， 重 点 要 理解 它 的 内 部 工作 原理 及 其 在 
UI 构 建 上 用 处 很 大 的 原因 。 




















我 们 的 目的 是 编写 整洁 且 可 维护 的 JSX 代码 , 为 了 实现 该 目的 , 我 们 需要 了 解 其 起 源 、 怎 样 
转换 为 JavaScript 以 及 有 哪些 特性 。 





一 开始 我 们 会 进行 回顾 ， 请 耐心 一 点 ， 因 为 掌握 好 基础 对 应 用 最 佳 实践 至 关 重要 。 
本 章 内 容 具体 如 下 所 示 。 


口 JSX 是 什么 , 为 什么 要 使 用 JSX。 

口 Babel 是 什么 ， 怎 样 利 用 它 来 编写 现代 JavaScript 代码 。 

口 JSX 的 主要 特性 以 及 其 与 HTML 之 间 的 区 别 。 

口 编写 优雅 且 可 维护 的 JSX 代码 的 最 佳 实践 。 

口 代码 检查 〈 尤 其 是 ESLint ) 怎样 使 得 多 个 应 用 或 团队 的 JavaScript 代码 风格 保持 一 致 。 
口 函数 式 编程 的 基础 ， 以 及 为 何 遵循 函数 范式 可 以 使 得 我 们 写 出 更 好 的 React 组 件 。 



















































































2.1 JSX 





我 们 在 第 1 章 中 看 到 React 融合 了 组 件 内 部 的 技术 界限 ， 改 变 了 关注 点 分 离 的 概念 。 
我 们 还 学 习 了 React 如 何 使 用 组 件 返回 的 元 素来 展示 屏幕 上 的 UI。 
现在 我 们 来 看 看 如 何在 组 件 内 声明 元 素 。 












































React 提供 了 两 种 定义 元 素 的 方式 。 一 种 是 使 用 JavaScript 函数 ， 另 一 种 是 使 用 类 似 XML 的 
JSX 语法。 以 下 是 React.js 官网 的 示例 : 




















2.1 JSX 11 





$ A JavaScript library for bui 





< C @ https://facebook.github.io 


A Simple Component 


React components implement a render() method that takes input data and returns 
what to display. This example uses an XML-like syntax called JSX. Input data that is 
passed into the component can be accessed by render() via this.props. 


JSX is optional and not required to use React. Try clicking on "Compiled JS" to see 
the raw JavaScript code produced by the JSX compiler. 


Live JSX Editor 


class HelloMessage extends React.Component { 
render() { 
return <div>Hello {this.props.name}</div>; 
} 
} 


ReactDOM.render (<HelloMessage name="John" />, mountNode); 


Hello John 





一 开始 就 要 接触 JSX 是 阻碍 人 们 进一步 了 解 React 的 主要 原因 之 一 , 因为 大 多 数 人 看 到 官网 
首页 示例 将 JavaScript 和 HTML 写 在 一 起 都 会 觉得 很 奇怪 。 


只 要 习惯 了 这 种 语法 ， 就 会 认识 到 使 用 它 很 方便 ， 因 为 它 和 HTML 很 相似 ， 编 写 过 Web 平 
台 UI 的 人 都 会 觉得 很 熟悉 。 

开始 和 闭合 标签 可 以 使 得 嵌 套 元 素 树 的 表示 变 得 非常 简单 ， 但 如 果 用 普通 的 JavaScript 语法 
来 做 ， 那么 占 套 元 素 树 会 变 得 难以 阅读 和 维护 。 














2.1.1 Babel 
为 了 在 代码 中 使 用 JSX (及 ES2015 的 特性 )， 我 们 需要 安装 Babel。 


首先 ， 需 要 清楚 地 理解 Babel 能 为 我 们 解决 什么 问题 ， 以 及 为 什么 需要 在 开发 流程 中 增加 这 
个 步骤 。 原 因 是 我 们 想 在 浏览 器 这 个 目标 环境 中 使 用 尚未 实现 的 语言 特性 。 这 些 高 级 特性 允许 开 
发 者 编写 更 整洁 的 代码 ， 但 浏览 器 无 法 识别 并 执行 。 


解决 方案 就 是 用 JSX 和 ES2015 语法 编写 脚本 ， 准 备 发 布 时 再 将 代码 编译 成 当今 主流 浏览 
都 已 实现 的 ES5 标准 规范 。 
































i Babel 是 React 社 区 广泛 使 用 的 一 个 流行 JavaScript 编译 器 。 
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Babel 可 以 将 ES2015 的 JavaScript 代码 编译 成 ES5 的 ,也 可 以 将 JSX 编译 成 JavaScript 函数 。 
这 个 过 程 称 为 转译 ， 因 为 它 将 源 代码 编译 成 男 一 份 新 源 代 码 ， 而 不 是 可 执行 文件 。 


使 用 Babel 相当 简单 ， 安 装 即 可 。 





npm install --global babel-cli 


如 果 不 想 全 局 (开发 人 员 往 往 不 喜欢 ) 安装 Babel, 也 可 以 将 它 安装 到 项 目 中 , 然后 通过 npm 
脚本 来 运行 ， 但 考虑 到 本 章 的 目的 ， 需 要 暂且 采用 全 局 安装 的 做 法 。 


安装 完成 后 ， 可 以 运行 以 下 命令 来 编译 任何 JavaScript 文件 。 



































babel source.js -o output .js 


Babel 如 此 强大 的 原因 之 一 在 于 可 以 灵活 配置 。 它 只 是 一 个 将 源 文件 转译 成 输出 文件 的 工具 ， 
配置 后 才能 使 用 一 些 转换 规则 。 


好 在 有 很 多 非常 有 用 的 预 设 配置 ， 其 安装 和 用 法 都 非常 简单 : 


npm install --global babel-preset-es2015 
babel-preset-react 


安装 完成 后 ， 在 根 文件 夹 下 创建 名 为 .babelre 的 配置 文件 ， 并 写 入 以 下 代码 来 告诉 Babel 使 
用 这 些 预 设 配 置 。 


{ 

"presets": [ 
"es2015", 
"react" 

] 

} 


从 现在 起 , 我 们 就 可 以 用 ES2015 和 JSX 来 编写 代码 源 文件 , 并 在 浏览 器 中 运行 输出 文件 了 。 















































2.1.2 Hello，World ! 
支持 JSX 的 环境 搭建 好 后 ， 我 们 就 可 以 深入 学 习 最 基础 的 示例 ， 生成 aiv 元 素 。 
以 下 代码 展示 了 如 何 用 React 的 createElement 函数 创建 div 元 素 : 








React.createElement ('div') 


以 下 是 JSX 写法 : 





si 
它 看 起 来 很 像 普 通 的 HTML。 
最 大 的 区 别 在 于 我 们 将 标记 写 在 了 .js 文件 中 , 值得 注意 的 是 , JSX 仅 仪 是 语法 糖 ， 在 浏览 带 
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中 运行 前 需要 转译 成 JavaScript。 





实际 上 上， 运行 Babel 时 会 将 <div /> 转换 成 React .createElement('dqiv')， 编 写 模板 时 
要 始终 牢记 这 一 点 。 





2.1.3 DOM 元 素 与 React 组 件 

有 了 JSX 后 , 我 们 既 可 以 创建 HTML 元 素 , 也 可 以 创建 React 元 素 ; 唯一 的 区 别 在 于 它们 是 
否 以 大 写字 母 开头 。 

例如 ， 泻 染 HTML 按钮 元 素 时 使 用 <button />， 而 演 染 Button 组 件 时 使 用 <Button />。 

前 一 个 按钮 会 转译 为 以 下 代码 : 

React .createELement ('button') 

后 一 个 按钮 会 转译 为 以 下 代码 : 

React .createElement (Button) 

以 上 区 别 在 于 ， 前 一 个 调用 传人 了 字符 串 形 式 的 DOM 元 素 类 型 ， 而 后 者 传人 了 组 件 本 身 ， 
这 也 意味 着 该 组 件 要 存在 于 当前 作用 域 。 

你 可 能 已 经 注意 到 ，JSX 支持 自 闭 的 标签 ， 这 样 可 以 很 好 地 保持 代码 简洁 ， 无 须 重复 编写 不 
必要 的 标签 。 











2.1.4 属性 


JSX 可 以 非常 方便 地 书写 包含 属性 的 DOM 元 素 或 React 组 件 。 实际 上 , 用 XML 设置 元 素 属 
生 就 很 简单 。 

<imgsrc="https://facebook.github.io/react/img/logo.svg" 

alt="React.js" /> 


JavaScript 的 等 效 写 法 如 下 所 示 : 


React.createElement ("img", { 
src: "https://facebook.github.io/react/img/logo.svg", 
alt: "React.js" 





i 





) ) ; 
以 上 代码 的 可 读 性 较 差 ， 虽然 只 有 几 个 属性 ,但 也 需要 经 过 一 番 




















思考 才能 读 懂 。 





2.1.5 子 元 素 
JSX 人 允许 定义 子 元 素来 描述 元 素 树 ， 并 构建 复杂 的 UI。 
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以 下 是 一 个 简单 的 文本 链接 示例 : 
<a href="https://facebook.github.io/react/">Click me!</a> 
它 会 转译 为 以 下 代码 : 
React .createElement ( 
a "https://facebook.github.io/react/" }, 


"Click me!" 
) 四 


出 于 布局 的 需要 ， 链 接 可 以 包 右 在 aiv 元 素 的 内 部 ， 而 JSX 代码 段 如 下 所 示 : 








<div> 
<a href="https://facebook.github.io/react/">Click me!</a> 
</div> 


等 效 的 JavaScript 代码 如 下 所 示 : 


React.createElement ( 
We iA 
null, 
React .createElement ( 
war, 
{ href: "https://facebook.github.io/react/" }, 
yok ie 
) 
) 四 


现在 , 类 似 XML 的 JSX 代 码 拥有 更 好 的 可 读 性 和 可 维护 性 , 但 了 解 JSX 所 对 应 的 JavaScript 
代码 非常 重要 ， 这 样 我 们 才能 熟练 掌握 元 素 的 创建 。 


JSX 的 妙 处 在 于 没有 限制 只 能 将 元 素 拒 套 为 其 他 元 素 的 子 元素 , 还 可 以 使 用 函数 或 变量 这 样 
的 JavaScript 表达 式 。 


要 想 这 样 做 ， 只 需要 用 双 花 括号 括 起 表达 式 即 可 : 





<div> 
Hello, {variable}. 
I'ma {function()}. 
</div> 


同 理 ， 这 也 适用 于 非 字 符 串 属性 : 














<a href={this.makeHref ()}>Click me!</a> 


2.1.6 JSX 与 HTML 的 区 别 
到 目前 为 止 , 我们 只 探讨 了 JSX 和 HTML 之 间 的 相似 之 处 。 现 在 我 们 来 了 解 一 下 两 者 间 的 
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微小 区 别 ， 以 及 为 什么 会 有 这 些 区 别 。 

1. 属性 

我 们 要 始终 牢记 ，JSX 不 是 一 门 标准 语言 ， 需 要 转译 成 JavaScript。 由 于 这 一 点 ， 有 些 属性 
无 法 使 用 。 
比如 ， 我 们 需要 用 className 取代 class， 用 htmlFor 取代 for: 











<label className="awesome-label" htmlFor="name" /> 

这 是 因为 class 和 for 都 是 JavaScript 的 保留 字 。 

2. 样式 

非常 明显 的 区 别 之 一 就 是 样式 属性 的 工作 原理 。 我 们 将 在 第 7 章 中 介绍 更 多 细节 ,目前 只 需 
要 了 解 其 工作 原理 即 可 。 

与 HTML 不 同 , 样式 属性 期 望 传人 JavaScript 对 象 , 而 不 是 CSS 字符 串 ， 而 且 样式 名 的 写法 
为 驼峰 式 命名 法 : 

<div style={{ backgroundColor: 'red' }} /> 

3. 根 元 素 


JSX 和 HTML 之 间 还 有 一 个 很 重要 的 区 别 值 得 一 提 , 因 为 JSX 元 素 会 转换 为 JavaScript 函数 ， 
但 JavaScript 不 允许 返回 两 个 函数 ， 因 此 如 果 有 多 个 同 级 元 素 ， 需 要 强制 将 它们 封装 在 一 个 父 元 
素 中 oO 


观察 以 下 这 个 简单 示例 : 















































<div /> 
<div /> 


上 述 代码 会 导致 以 下 错误 : 
Adjacent JSX elements must be wrapped in an enclosing tag 


而 以 下 写法 就 是 有 效 的 : 


<div> 

















<div /> 
<div /> 
</div> 


必须 添加 多 余 的 aiv 标签 使 得 JSX 生效 这 个 操作 无 疑 让 人 感到 恼火 ,不 过 React 的 开发 人 员 
目前 (撰写 本 书 之 时 ) 正在 寻找 解决 方案 : 


https://github.com/reactjs/core-notes/blob/master/2016-07/july-07.md 








4. 空格 

一 开始 让 人 觉得 麻烦 的 还 有 一 点 ， 我 们 要 始终 记 住 JSX 不 是 HTML 这 个 事实 ， 尽 管 它 的 语 
法 很 像 XML。 

实际 上 ，JSX 处 理 文本 和 元 素 间 的 空格 的 方式 与 HTML 不 同 ， 这 种 方式 有 点 违反 直觉 。 


查看 以 下 代码 片段 : 





























<div> 
<span>foo</span> 
bar 
<span>baz</span> 
</div> 


浏览 器 解析 HTML 时 ， 以 上 代码 会 显示 foo bar baz， 这 与 我 们 的 预想 相同 。 

而 JSX 会 将 同一 份 代码 泻 染 为 foobarbaz， 这 是 因为 般 套 的 三 行 代码 转译 成 了 aiv 元 素 的 
独立 子 元 素 ， 没 有 将 空格 计算 在 内 。 为 了 得 到 与 HTML 一 致 的 输出 结果 ， 普 遍 的 解决 方案 是 在 
元 素 间 显 式 插入 空格 。 


<div> 
<span>foo</span> 
EE 
bar 
”人 
<span>baz</span> 
</div> 


如 你 所 见 ， 这 里 用 JavaScript 表达 式 封 装 了 空 字符 串 来 强制 编译 器 在 元 素 间 搬 和 空格 。 
5. 布尔 值 属性 


开始 真正 学 习 在 JSX 中 定义 布尔 值 属性 前 , 还 需要 了 解 一 些 基础 知识 。 如 果 设 置 某 个 属性 却 
没有 赋值 ， 那 么 JSX 会 默认 其 值 是 true， 这 种 行为 类 似 HTML 的 disabled 属性 。 


这 意味 着 如 果 要 将 属性 值 设置 为 false， 则 需要 显 式 地 声明 。 
























































<button disabled /> 
React .createElement ("button", { disabled: true }); 


以 下 是 男 一 个 示例 : 


<button disabled={false} /> 
React .createElement ("button", { disabled: false }); 


一 开始 会 让 人 感到 疑惑 ， 因 为 我 们 认为 遗漏 属性 值 应 该 为 false, 而 实际 并 非 如 此 。 在 使 
用 React 时 ， 我 们 应 当 始 终 显 式 地 声明 ， 以 避免 发 生 混 消 。 
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2.1.7 展开 属性 


展开 属性 操作 符 也 是 一 项 很 重要 的 特性 , 它 来 源 于 ECMAScript 提案 中 的 对 象 剩余 /展开 属性 
(Object Rest/Spread Properties for ECMAScript )， 该 特性 可 以 非常 方便 地 为 元 素 传递 JavaScript 对 
象 的 全 部 属性 。 


向 子 元 素 传递 数据 时 ， 不 要 按 引用 方式 传递 整个 JavaScript 对 象 ， 而 要 使 用 对 象 的 基本 类 型 
值 以 方便 校 验 。 这 种 做 法 很 常见 ， 并 且 引 发 的 bug 更 少 ， 写 出 的 组 件 更 稳健 且 更 不 易 出 错 。 


该 特性 的 用 法 如 下 所 示 : 
































CONnst E00 3 (id "Bar } 
return <div {...foo} /> 


以 上 代码 的 转译 结果 如 下 所 示 : 


var £00 = {, LQ: "Bar }3 
return React.createElement ('div', foo); 


2.1.8 ”JavaScript 模板 


最 后 , 我 们 假设 将 模板 移 到 组 件 内 部 而 不 用 外 部 模板 库 具有 一 个 优势 , 即 可 以 利用 JavaScript 
的 完整 功能 ， 接 下 来 我 们 探讨 一 下 这 个 优势 的 具体 意义 。 


展开 属性 就 是 一 个 示例 ， 男 一 个 明显 的 示例 是 可 以 用 双 花 括号 封装 JavaScript 表达 式 以 作为 
属性 值 : 


<button disabled={errors.length} /> 





















































2.1.9 常见 模式 


现在 我 们 已 经 学 习 并 掌握 了 JSX 的 原理 , 接 下 来 将 了 解 如 何 遵循 一 些 有 用 的 约定 和 技巧 , 以 
便 正确 使 用 JSX。 


1. 多 行书 写 


我 们 先 来 看 一 个 简单 模式 。 前 文 提 过 ， 应 该 倾向 于 使 用 JSX 而 不 是 createElement 方法 ， 
主要 原因 之 一 便 是 JSX 的 语法 很 像 XML ， 而 且 对 称 的 开 闭 标签 可 以 完美 地 表示 节点 树 。 


此 ， 我 们 应 该 尝试 掌握 它 的 正确 用 法 并 加 以 充分 利用 。 
参见 以 下 示例 ; 需要 徐 套 元 素 的 任何 情况 下 都 应 该 多 行书 写 : 


<div> 
<Header /> 
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<div> 
<Main content={...} /> 
</div> 
</div> 


这 比 以 下 写法 更 易 读 : 

<div><Header /><div><Main content={...} /></div></div> 

如 果 出 现 子 节点 不 是 元 素 , 而 是 文本 或 变量 这 样 的 例外 情况 , 那么 应 该 和 父 节 点 的 标签 写 在 
同一 行 ， 并 避免 产生 混淆 ， 具 体 代 码 如 下 所 示 : 








<div> 
<Alert>{message}</Alert> 
<Button>Close</Button> 
</div> 


多 行书 写 元 素 时 ， 一 定 要 记得 用 括号 封装 它们 。JSX 本 质 上 会 替换 成 函数 ， 由 于 自动 分 号 搬 
入 机 制 的 存在 ， 另 起 一 行 的 函数 可 能 会 导致 意外 结果 。 例 如 ,在 泻 染 方法 内 返回 JSX 代 人 码 ,， 这 也 
是 React 创建 UI 的 方式 。 








以 下 示例 可 以 正常 运行 ， 因 为 aiv 元 素 和 返回 在 同一 行 : 
return <div /> 
但 接 下 来 的 示例 就 失效 了 : 


return 
<div /> 


因为 它 会 转换 为 以 下 代码 : 


return; 
React.createElement ("div", null); 


因此 你 需要 将 代码 语句 包 右 在 括号 内 : 


return ( 
<div /> 


) 
2. 多 个 属性 的 书写 
编写 JSX 代码 经 常 遇 到 的 一 个 问题 是 元 素 拥 有 多 个 属性 。 一 种 方案 是 将 所 有 属性 写 在 同一 
行 , 但 这 样 会 使 得 一 行 代 码 变 得 特别 长 , 我们 不 希望 代码 出 现 这 种 情况 ( 后 文 介绍 了 如 何 强制 执 
行 代 码 风 格 指 南 )。 

常见 的 解决 方案 是 一 行书 写 一 个 属性 ， 同 时 缩 进 一 个 层级 ， 并 保持 结尾 括号 和 开始 标签 
对 齐 : 
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<button 
foo0o="bar" 
veryLongPropertyName="baz" 
onSomething={this.handleSomething} 
/> 


3 打 伯 和 2 


当 用 到 条 件 语句 时 , 情况 就 变 得 很 有 趣 了 。 例如 , 我 们 只 想 在 满足 特定 条 件 时 泻 染 一 些 组 件 。 
实际 上 ， 能 够 使 用 JavaScript 判断 条 件 已 经 具有 很 大 优势 了 ， 不 过 JSX 有 许多 不 同方 式 来 表达 条 
件 逻 辑 ， 理 解 每 种 方式 的 益处 及 其 存在 的 问题 对 于 编写 可 读 且 可 维护 的 代码 非常 重要 。 


假设 我 们 想 要 在 用 户 当前 登录 到 应 用 时 显示 注销 按钮 。 
起 初 的 代码 如 下 所 示 : 


let button 
if (isLoggedIin) { 

button = <LogoutButton /> 
} 


return <div>{button}</div> 


上 述 做 法 可 行 ， 但 可 读 性 不 够 好 ， 组 件 和 条 件 很 多 时 会 更 差 。 
JSX 可 以 利用 行内 条 件 来 判断 : 


LVS 
{isLoggedIin && <LoginButton />} 
</div> 


上 述 写法 同样 有 效 ， 因 为 如 果 条 件 为 false， 则 不 会 浑 染 任何 组 件 ， 而 如 果 条 件 为 true， 
那么 LoginButton 组 件 的 createElement 方法 会 被 调用 » 并 返 回 元 素 以 构建 最 终 的 元 素 树 。 


如 果 条 件 语句 有 有 额外 分 支 ( 常见 的 if.. .else 语句 ), 并 且 我 们 想 要 在 用 户 登录 后 显示 注销 
按钮 ， 否 则 显示 登录 按钮 ， 就 可 以 利用 JavaScript 的 if.. .else 语句 ， 如 下 所 示 : 
































let button 
if (isLoggedIin) { 
button = <LogoutButton /> 
} else { 
button = <LoginButton /> 
} 


return <div>{button}</div> 


更 好 的 替代 方案 是 三 元 条 件 运算 ， 因 为 代码 更 简洁 : 























<div> 
{isLoggedIn ? <LogoutButton /> : <LoginButton />} 
</div> 
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三 元 条 件 运算 在 Redux 等 流行 库 所 提供 的 真实 示例 ( https://github.com/reactjs/redux/blob/master/ 
examplesfreal-world/srccomponentsListjs#L25 ) 中 随处 可 见 , 组 件 获取 数据 时 , 示例 根据 isFetching 
变量 的 值 使 用 三 元 运算 符 来 显示 按钮 文本 为 Loading 或 者 1oad more。 


<button .1 
{isFetching ? 'Loading...' : 'Load More'} 
</button> 


我 们 来 看 看 更 复杂 情况 下 的 最 佳 方案 。 例 如 ， 我 们 需要 检查 多 个 变量 才能 判断 是 否 要 泻 染 
组 件 : 


<div> 
{dataIsReady && (isAdmin || userHasPermissions) && 
<SecretData /> 
} 


</div> 


上 述 示例 中 的 行内 条 件 语 句 的 写法 很 好 , 但 可 读 性 受到 了 很 大 影响 。 此 时 可 以 在 组 件 内 编写 
一 个 辅助 函数 来 检验 JSX 的 条 件 语句 : 


canShowSecretData() { 
const { dataIsReady, isAdmin, userHasPermissions } = this.props 
return datalsReady && (isAdmin || userHasPermissions) 


} 























<div> 
{this.canShowSecretData() && <SecretData />} 
</div> 


如 上 所 示 , 修改 后 的 代码 大 大 提升 了 可 读 性 , 条 件 语 句 也 更 直观 。 即 使 大 半年 后 再 回头 看 这 
段 代 码 ， 也 能 够 根据 函数 名 清晰 地 看 懂 用 途 。 
如 果 不 喜欢 用 函数 ， 那 么 你 可 以 利用 对 和 象 的 getter 方法 使 代码 更 优雅 。 
我 们 定义 getter 方 法 来 取代 函数 ， 如 下 所 示 : 
get canShowSecretData() { 
const { dataIsReady, isAdmin, userHasPermissions } = this.props 


return datalIsReady && (isAdmin || userHasPermissions) 


} 




















<dTV 
{this.canShowSecretData && <SecretData />} 
</div> 


同样 的 做 法 也 可 以 用 于 计算 属性 。 假 设 有 两 个 独立 属性 currency 和 value。 除 了 将 价格 
字符 串 写 在 泻 染 方法 中 ， 还 可 以 创建 一 个 类 函数 : 
getPrice() { 


return ‘ss{this.props.currency}$s{this.props.value}. 


} 
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<div>{this.getPrice()}</div> 
这 样 做 更 好 ， 因 为 单独 抽 离 了 生成 字符 串 的 代码 ， 而 测试 包含 逻辑 的 代码 更 方便 。 
再 进一步 ， 也 可 以 像 前 面 那样 用 getter 取代 函数 : 





get price() { 
return ‘S${this.props.currency}s$s{this.props.value}. 


} 
<div>{this.price}</div> 


回 到 条 件 语句 的 讨论 , 还 有 一 些 方案 需要 用 到 外 部 依赖 。 为 了 尽量 小 化 应 用 包 体积 ， 最 好 避 
免 引 入 外 部 依赖 ， 不 过 当前 这 种 特殊 情况 值得 这 样 做 ， 因 为 改进 模板 的 可 读 性 有 很 大 好 处 。 


第 一 项 方案 是 render-if， 可 以 执行 以 下 命令 来 安装 : 





npm install --save render-if 
然后 就 可 以 轻松 地 在 项 目 中 使 用 它 ， 如 下 所 示 : 


const { dataIsReady, isAdmin, userHasPermissions } = this.props 
const canShowSecretData = renderIf\( 


dataIsReady && (isAdmin || userHasPermissions) 
) 
<div> 

{canShowSecretData(<SecretData />)} 
</div> 


我 们 将 条 件 语 句 封 装 进 renderIf 函数 。 
这 个 工具 函数 的 返回 值 也 是 一 个 函数 , 可 以 接收 JSX 标记 作为 参数 , 当 条 件 为 true 时 显示 。 


始终 牢记 , 不 要 在 组 件 内 添加 过 多 逻辑 。 有 些 组 件 可 能 需要 这 样 做 ,但 我 们 应 该 尽 可 能 保持 
组 件 简洁 易 懂 ， 这 样 便 于 定位 和 修复 问题 。 

至 少 应 该 保持 renderIf 函数 简洁 ， 为 了 实现 这 个 目的 ， 可 以 使 用 男 一 个 工具 库 
react-only-if， 有 了 它 之 后 ， 可 以 通过 高 阶 组 件 来 设置 条 件 函 数 ， 只 需要 按照 条 件 为 真 的 情 
况 编写 组 件 即 可 。 

第 4 章 将 介绍 高 阶 组 件 , 不 过 目前 你 只 需要 知道 它们 就 是 函数 ,可 以 接收 组 件 并 对 其 进行 改 
进 再 返回 ,改进 包括 添加 属性 或 修改 行为 。 


可 以 执行 以 下 命令 来 安装 这 个 库 : 









































npm install --save react-only-if 
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最 常 








安装 完成 后 ， 就 可 以 按照 以 下 方式 在 应 用 中 使 用 它 。 


const SecretDataOnlyIf = omnlyIE( 


({ dataIsReady, isAdmin, userHasPermissions }) => { 
return datalsReady && (isAdmin || userHasPermissions) 
} 
) (SecretData) 
<div> 
<SecretDataOnlyIf 


datalIsReady={...} 

isAgdmin={...} 

userHasPermissions={...} 
/> 


</div> 
在 以 上 代码 中 ,组 件 内 部 不 包含 任何 逻辑 。 

将 条 件 语 句 作 为 onlyIf 函数 的 第 一 个 参数 传人 ,满足 条 件 时 就 泻 染 组 件 。 

用 于 校 验 条 件 的 函数 可 以 接收 组 件 的 属性 、 状 态 以 及 上 下 文 环境 。 

这 样 就 可 以 避免 条 件 语句 对 组 件 造成 污染 ， 有 助 于 我 们 更 轻松 地 理解 并 探究 组 件 的 代码 。 











4. 循环 
开发 UI 时 经 常 需 要 展示 列表 。 将 JavaScript 作为 模板 语言 来 展示 列表 非常 方便 。 
如 果 在 JSX 模板 中 编写 一 个 函数 并 返回 数组 ， 那 么 数组 的 每 一 项 都 会 编译 为 一 个 元 素 。 


前 文 提 过 , 可 以 在 花 括 号 内 使 用 任何 JavaScript 表达 式 , 针对 给 定 对 象 的 数组 生成 元 素数 组 ， 
用 的 做 法 是 使 用 map 方法 。 


我 们 来 深入 探讨 一 个 真实 示例 。 假设 你 有 一 张 用 户 列 表 , 其 中 每 个 用 户 都 有 一 个 对 应 的 姓名 



































属性 。 





用 以 下 代码 创建 一 张 无 序 用 户 列 表 : 
LS 


{users.map (user =><li>{user.name}</1i>)} 
</ul> 


这 段 代 码 简单 而 又 强大 ， 因 为 它 结 合 了 HTML 和 JavaScript 两 者 的 能 
5. 控制 语句 
UI 模板 中 的 条 件 和 循环 都 是 常见 操作 ,使 用 JavaScript 的 三 元 操作 符 或 map 方法 来 实现 它们 











看 上 去 有 些 奇 怪 。JSX 的 开发 理念 就 是 如 此 ， 它 只 抽象 了 元 素 的 创建 部 分 ， 而 逻辑 部 分 则 留 给 真 
正 的 JavaScript， 这 种 做 法 很 巧妙 ， 但 有 时 代码 会 不 够 简洁 。 
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总 的 来 说 , 我 们 的 目的 是 从 组 件 中 移 除 所 有 人 逻辑， 尤其 是 泻 染 方法 中 的 。 但 有 时 需要 根据 应 
用 的 状态 来 显示 或 隐藏 元 素 ， 经 常 还 需要 遍历 集合 与 数组 。 


如 果 你 认为 用 JSX 完成 此 类 需求 可 以 提高 代码 可 读 性 ， 可 以 直接 用 现成 的 Babel 插件 : 


jsx-control-statementso ul 


我 们 来 看 看 如 何 使 用 它 。 


首先 安装 : 





npm install --save jsx-control-statements 


安装 完成 后 ， 将 它 添加 到 .babelrc 文件 中 的 Babel 插件 列表 。 





"plugins": ["jsx-control-statements"] 





接着 就 可 以 使 用 这 个 插件 提供 的 语法 了 ，Babel 会 将 它 连同 普通 的 JSX 语法 一 同 转译 
以 下 是 使 用 该 插件 编写 的 条 件 语句 : 























<If condition={this.canShowSecretData}> 
<SecretData /> 
It 


它 会 转译 为 三 元 表达 式 ， 如 下 所 示 : 
{canShowSecretData ? <SecretData /> : null} 


If 组 件 非常 有 用 ,但 如 果 演 染 方法 中 需要 艇 套 条 件 ， 那 么 它 很 容易 变 得 混乱 日 难以 理解 。 
查看 以 下 choose 组 件 的 代码 : 











<Choose> 
<When condition={...}> 
<span>if</span> 
</When> 
<When condition={...}> 
<span>else if</span> 
</When> 
<Otherwise> 
<span>else</span> 
</Otherwise> 
</Choose> 


注意 ! 上 述 代码 会 转译 为 多 个 三 元 表达 式 。 


最 后 ,我 们 介绍 一 个 可 以 轻松 实现 循环 的 组 件 ( 记 住 ,我们 所 提 到 的 并 非 真 实 的 组 件 ， 而 只 
是 语法 糖 ): 
<ul> 


<For each="user" of={this.props.users}> 
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<li>{user.name}</1i> 
</For> 
</ul> 


上 述 代码 会 转译 为 map 方法 ， 这 并 没有 什么 神奇 之 处 。 





如 果 习 惯 使 用 linter ( 一 种 代码 检查 工具 ), 你 可 能 会 疑惑 为 何 linter 没有 针对 这 些 代码 报错 。 
实际 上 ，user 变量 在 转译 前 并 不 存在 ， 也 没有 封装 在 某 个 函数 中 。 为 了 避免 代码 检查 时 报错 ， 


我 们 需要 安装 男 一 个 插件 : eslintplugin-jsx-control-statements。 





如 果 无 法 理解 上 一 段 内 容 ， 不 要 担心 ; 我 们 将 在 2.2 节 介 绍 代码 检查 。 


6. 次 级 演 染 




















值得 强调 的 是 ， 我们 总 是 希望 组 件 可 以 足够 小 ， 演 染 方法 也 要 简单 明了 。 





然而 , 实现 这 个 目的 并 不 简单 ,尤其 是 迭代 开发 应 用 时 ， 我 们 无 法 在 第 一 次 迭代 过 程 中 准确 
地 判断 如 何 将 组 件 拆 分 得 更 小 。 





那么 当 泻 染 方法 的 代码 量 多 到 难以 维护 时 , 应 该 做 什么 呢 ? 一 种 方案 是 将 其 拆 分 成 更 小 的 方 
法 ， 同 时 又 将 所 有 逻辑 都 保留 在 原 有 组 件 内 部 。 


查看 以 下 示例 : 











renderUserMenu() { 
// JSX 用 于 用 户 菜 单 
} 


renderAdminMenu() { 
// JSX 用 于 管理 员 菜 单 
} 


render() { 
return ( 
<div> 
<hli>Welcome back!</hi1i> 
{this.userExists && this.renderUserMenu()} 
{this.userIsAdmin &é& this.renderAdminMenu()} 
</div> 
) 
} 


这 种 方案 并 不 总 是 可 以 当 作 最 佳 实践 , 因为 显然 拆 分 组 件 的 做 法 更 好 。 有 时 这 样 做 只 是 为 了 
保持 泻 染 方法 简洁 。Redux 的 一 个 真实 示例 就 是 用 一 个 次 级 泻 染 方法 来 演 染 加 载 更 多 按钮 。 


现在 我 们 已 经 熟练 掌握 了 JSX, 接 下 来 将 继续 深入 学 习 如 何在 代码 中 遵循 一 套 风 格 指 南 ， 以 
确保 代码 风格 保持 一 致 。 
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2.2 ESLint 
我 们 总 是 希望 尽 可 能 写 出 最 佳 代码 ,但 有 了 时 总 会 出 错 ， 然 后 需要 花 数 小 时 定位 bug， 最 后 发 

















现 只 是 拼写 错误 ， 这 很 令 人 诅 丧 。 好 在 一 些 工 具 可 以 帮助 我 们 在 输入 过 程 中 检查 代码 的 正确 性 。 
这 些 工 具 无 法 表明 代码 能 否 实现 预期 效果 ,但 可 以 帮助 我 们 避免 语法 错误 。 


如 果 之 前 使 用 过 C# 这 种 静态 语言 ， 那 么 你 应 该 很 熟悉 IDE 给 出 的 这 种 警告 信息 。 











Douglas Crockford 开发 的 JSLint ( 最 初 发 布 于 2002 年 ) 使 得 JavaScript 代码 检查 变 得 流行 起 
来 。 后 来 出 现 了 JSHint， 如 今 ESLint 成 为 了 React 领域 的 事实 标准 。 


ESLint 是 2013 年 发 布 的 开源 项 目 ， 由 于 其 配置 化 程度 高 且 扩 展 性 良好 ， 逐 渐 流 行 起 来 。 


在 JavaScript 生态 系统 中 ， 各 种 库 和 技术 都 变化 迅速 ， 因 此 关键 是 要 找到 一 个 可 以 方便 地 使 
用 插件 来 扩展 的 工具 ， 并 且 可 以 按 需 启用 或 禁用 规则 。 


最 重要 的 是 ， 如 今 我 们 普遍 使 用 Babel 这 样 的 转译 器 ， 以 及 尚未 归 人 JavaScript 标准 版 本 的 
试验 特性 ， 因 此 需要 让 linter 知道 源 代码 文件 遵循 了 哪些 规则 。 


linter 不 仅 能 帮助 我 们 更 少 犯 错 ， 或 者 至 少 更 早 发 现 错误 ， 它 还 能 强制 推行 一 些 常见 的 编程 
风格 指南 。 这 一 点 非常 重要 ， 尤 其 是 开发 者 众多 的 大 型 团队 中 的 每 个 人 都 有 自己 偏爱 的 编程 风格 。 


如 果 以 不 同 风格 编写 代码 库 中 的 不 同文 件 ， 甚 至 不 同 函 数 ， 那 么 这 些 代 码 将 难以 阅读 。 






















































































cm 村 士 


2.2.1 安 泛 
首先 ， 执行 以 下 命令 来 安装 ESLint: 
npm install --global eslint 
可 执行 程序 安装 完成 后 ， 就 可 以 用 以 下 命令 来 运行 它 : 
eslint source.js 
输出 结果 会 告诉 我 们 文件 中 是 否 有 错 。 
安装 后 首次 运行 不 会 看 到 任何 报错 ,因为 它 各 方面 都 需要 配置 ,一 开始 并 不 包含 任何 默认 规则 。 








2.2.2 ”配置 
现在 我 们 开始 配置 ESLint。 
可 以 使 用 位 于 项 目 根 目录 的 .eslintrc 文件 来 配置 ESLint。 

















26 第 2 章 整理 代码 





使 用 rules 属性 来 添加 规则 。 
举例 来 说 ， 创 建 .eslintrc 文件 并 禁用 分 号 : 











上 述 配置 文件 的 含义 是 : "semi "是 规则 名 ，[2， "never"] 是 规则 的 值 。 一 开始 看 到 这 种 
配置 会 觉得 不 够 直观 。 
ESLint 规则 具有 决定 问题 严重 程度 的 三 个 等 级 。 


口 off (或 者 0): 禁用 规则 
口 warn (或 者 1): 规则 会 产生 警告 
D error (或 者 2): 规则 会 抛 出 错误 


将 规则 的 值 设 为 2， 因为 我 们 希望 当代 码 不 符合 规则 时 ，ESLint 会 抛 出 错误 。 
第 二 个 参数 将 ESLint 配置 为 不 允许 代码 中 使 用 分 号 ( 相反 值 为 always )。 
ESLint 及 其 插件 都 有 详细 的 文档 ， 你 可 以 找到 任意 一 条 规则 的 描述 及 其 通过 或 失败 的 示例 。 























现在 新 建 一 个 文件 并 写 入 以 下 代码 。 
var ToG = "hbar 


(注意 ， 此 处 使 用 了 var 关键 词 ， 因 为 ESLint 还 不 知道 我 们 要 用 ES2015 语法 来 编码 。 ) 








执行 eslint indqex.js 后 ， 就 会 看 到 以 下 提示 : 





Extra semicolon (semi) 

这 太 棒 了 ! linter 搭建 完毕 ， 它 帮助 我 们 遵循 了 第 一 条 规则 。 

可 以 手动 启用 或 禁用 每 条 规则 ， 也 可 以 一 步 启 用 推荐 配置 ， 只 需要 在 .eslintrc 中 添加 以 下 代 
但 即 可 。 


{ 


"extends": "eslint:recommended" 


} 
extends 属性 表明 我 们 将 沿用 ESLint 的 推荐 配置 ， 另外 我 们 也 可 以 手动 修改 .eslintre 的 
rules 属性 来 覆盖 每 条 规则 ， 正 如 前 文 所 做 的 那样 。 


启用 推荐 规则 后 ,再 次 运行 ESLint， 此 时 不 会 看 到 与 分 号 相关 的 任何 报错 ( 推荐 配置 中 不 包 
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括 这 个 部 分 )， 但 linter 会 提示 声明 过 的 foo 变量 从 未 使 用 。 
no-unused-vars 规则 对 于 保持 代码 简洁 非常 有 用 。 

















一 开始 提 过 ， 我 们 希望 用 ES2015 话 法 编写 代码 ， 但 是 以 下 代码 会 报错 ; 


const foo = 'bar' 
报错 信息 如 下 所 示 : 


Parsing error: The keyword 'const' is reserved 


因此 ， 要 想 启用 ES2015 语法 ， 需 要 添加 配置 选项 : 





"parserOptions": { 
"ecmaVersion": 6, 
} 
添加 完毕 后 ， 就 只 剩 下 变量 未 使 用 的 报错 提示 了 ， 这 是 正常 的 。 


最 后 使 用 以 下 配置 来 启用 JSX 语法 : 














"parserOptions": { 
"ecmaVersion": 6, 
"ecmaFeatures": { 


“VS 
} 
} 





如 果 你 之 前 开发 过 React 应 用 却 从 未 使 用 linter, 现在 要 想 学 习 规 则 并 开始 习惯 , 那么 最 好 运 
行 ESLint 来 检查 源 代 码 并 修复 所 有 问题 。 

用 ESLint 帮助 我 们 编写 更 好 的 代码 的 方式 有 很 多 种 。 一 种 是 前 文 的 做 法 : 在 命令 行 中 运行 
ESLint， 并 得 到 一 系列 错误 提示 。 





这 种 做 法 可 行 ,但 一 直 手 动 执行 不 够 方便 。 更 好 的 做 法 是 在 编辑 器 中 加 入 检查 流程 ， 这 样 答 
入 代码 时 就 能 立刻 得 到 反馈 。Sublime Text、Atom 以 及 其 他 流行 的 编辑 器 都 提供 了 ESLint 插件 来 
实现 这 个 目的 。 

















在 真实 的 开发 场景 中 ,手动 运行 ESLint 或 者 让 编辑 器 实时 提供 反馈 非常 有 用 ,但 是 还 不 够 ， 
因为 我 们 会 遗漏 某 些 错误 或 警告 ， 甚 至 是 直接 无 视 。 




















为 了 避免 代码 库 中 出 现 未 检查 的 代码 ， 我 们 可 以 将 ESLint 作为 开发 流程 中 的 一 环 。 举 例 来 
说 ， 可 以 在 测试 时 执行 检查 ， 如 果 代 码 不 符合 检查 规则 ， 那 么 整个 测试 步骤 就 算 失 败 。 








另 一 个 方案 是 在 发 起 pull request 前 进行 代码 检查 ， 这 样 在 同事 开始 审查 前 还 有 机 会 整理 
代码 。 
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2.2.3 ”React 插件 
前 文 提 过 , ESLint 流行 起 来 的 主要 原因 是 其 可 以 用 搬 件 进行 扩展 , 对 我 们 最 重要 一 个 搬 件 是 
eslLint-plLludin-treacto 


ESLint 不 需要 任何 插件 就 能 解析 JSX ( 启用 配置 开关 即 可 ), 但 我 们 想 要 更 多 功能 。 例 如 ， 
我 们 可 能 会 想 要 推行 前 面 章节 中 的 某 项 最 佳 实践 ， 并 使 得 模板 在 多 个 开发 人 员 及 团队 间 保 持 
= 


要 想 使 用 该 插件 ， 需 要 先进 行 安装 : 
































npm install --global eslint-plugin-react 


安装 完成 后 ， 在 配置 文件 中 添加 以 下 代码 ， 以 便 ESLint 可 以 使 用 它 : 








有 所 四 6 用 请 
"react" 


] 


如 你 所 见 ， 配 置 非常 直观 ， 没 有 任何 复杂 的 地 方 。 与 ESLint 一 样 ， 没 有 配置 规则 的 情况 下 
它 什 么 都 不 会 做 ， 我 们 可 以 启用 推荐 配置 来 激活 基础 规则 集 。 


在 .eslintrc 文件 中 更 新 "extends" 属 性， 如 下 所 示 : 











"extends": [ 
"eslint:recommended", 
"plugin:react/recommended" 


] ， 
如 果 出 现 编写 错误 ， 比 如 React 组 件 的 同一 个 属性 写 了 两 次 ， 那 么 就 会 出 现 错误 提示 : 








<Foo bar bar /> 

以 上 代码 会 返回 如 下 所 示 的 错误 提示 : 

No duplicate props allowed (react/jsx-no-duplicate-props) 

大 量规 则 可 以 用 于 项 目 。 我 们 来 了 解 其 中 一 部 分 ,看 看 它们 是 如 何 帮助 我 们 遵循 最 佳 实践 的 。 
正如 第 1 章 中 所 说 ， 按 照 元 素 的 树 结构 缩 进 JSX 代码 有 助 于 提升 可 读 性 。 

如 果 代 码 库 及 组 件 的 缩 进 风格 不 一 致 ， 则 会 出 现 问题 。 


我 们 来 查看 一 个 示例 ， 了 解 一 下 ESLint 如 何 帮助 团队 的 每 个 成 员 遵 循 风格 指南 ， 而 又 无 须 
死记 硬 背 。 


注意 , 这 种 情况 下 的 不 正确 缩 进 实际 上 不 算 错误 ,代码 还 是 能 够 正常 运行 的 ; 这 只 是 一 致 性 
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首先 ， 激活 以 下 规则 : 


"rules": { 
"react/jsx-indent": [2, 2] 


} 


A 


第 一 个 2 表示 如 果 代 码 不 符合 规则 , 则 ESLint 应 该 给 出 错误 提示 ,第 二 个 2 则 表示 每 个 JSX 
元 素 应 该 缩 进 两 个 空格 。 因 为 ESLint 不 会 做 任何 决定 ， 所 以 启用 哪 条 规则 完全 取决 于 你 自己 。 
甚至 可 以 通过 设置 第 二 参数 为 0 来 选择 无 缩 进 风格 。 


编写 以 下 代码 : 






































<div> 
<div /> 
</div> 


ESLint 会 给 出 以 下 报错 信息 : 





Expected indentation of 2 space characters but found 0 
(react/jsx-indent) 


换行 书写 属性 值 时 也 有 类 似 的 规则 来 约束 缩 进 。 
前 文 介绍 过 ， 属 性 过 多 或 过 长 时 ， 较 好 的 做 法 是 换行 书写 。 
要 想 推行 属性 根据 元 素 名 缩 进 两 个 空格 的 格式 ， 局 用 以 下 规则 即 可 : 























"react/jsx-indent-props": [2, 2] 


至 此 ， 如 果 属 性 没有 缩 进 两 个 空格 ， 那 么 ESLint 就 会 报错 。 

















问题 在 于 , 如 何 界定 一 行 代码 过 长 ? 多 少 个 属性 算 多 ? 每 个 开发 人 员 都 有 不 同 的 看 法 。 ESLint 
的 jsx-max-props-per-line 规则 有 助 于 维护 一 致 性 ， 这 样 每 个 组 件 的 编写 方式 就 相同 了 。 








ESLint 的 React 插件 提供 的 规则 不 仅 有 助 于 写 出 更 优雅 的 JSX 代码 ， 也 有 助 于 写 出 更 好 的 
React 组 件 。 








举例 来 说 ,可 以 强制 要 求 属性 类 型 按照 字母 表 顺 序 排列 、 使 用 未 声明 的 属性 时 给 出 错误 提示 ， 
或 者 要 求 尽量 编写 无 状态 的 函数 组 件 ， 而 不 要 使 用 类 (第 3 章 将 介绍 两 者 的 详细 区 别 ) 等 。 




















2.2.4 Airbnb 的 配置 


我 们 已 经 了 解 了 ESLint 如 何 通 过 静态 分 析 来 发 现 错误 ， 以 及 如 何 促使 我 们 在 整个 代码 库 中 
遵循 一 致 的 风格 指南 。 


我 们 也 见识 到 了 ESLint 的 灵活 之 处 ， 以 及 如 何 通 过 配置 与 插件 来 扩展 它 。 
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我 们 还 学 到 了 可 以 用 推荐 配置 来 激活 一 套 基 本 规则 集 ， 无 须 手动 完成 这 个 繁琐 的 过 程 。 

接 下 来 我 们 再 进一步 了 解 它 。 

ESLint 的 extends 属性 非常 强大 , 因此 你 可 以 从 第 三 方 配置 人手, 再 添加 自己 特有 的 规则 。 

React 领域 最 流行 的 配置 之 一 莫 过 于 Airbnb 的 那 一 套 。Airbnb 的 开发 者 按照 React 的 最 佳 实 
践 创建 了 一 套 规则 集 ， 你 可 以 直接 在 代码 库 中 使 用 ， 无 须 自己 手动 判断 启用 哪 条 规则 。 

要 想 使 用 这 套 配 置 ， 必 须 先 安装 一 些 依赖 : 


npm install --global eslint-config-airbnbeslint@^2.9.0 eslint-plugin- 
jsx-ally@^1.2.0 eslint-plugin-import@^1.7.0 eslint-plugin-react@^5.0.1 


然后 在 .eslintrc 中 添加 以 下 配置 : 


{ 
"extends": "airpbnb" 


} 
接着 就 可 以 尝试 执行 ESLint 来 检查 你 的 React 源 代码 文件 ， 可 以 看 到 代码 是 否 符 合 Airbnb 
规则 ， 以 及 这 些 规则 是 否 适合 你 。 


以 上 就 是 开始 使 用 代码 检查 工具 最 简单 也 最 常用 的 方式 。 







































































2.3 ”函数 式 编程 基础 


除了 编写 JSX 时 遵循 最 佳 实践 ， 并 使 用 linter 来 加 强 代 码 一 致 性 以 更 早 发 现 错误 ,保持 代码 
简洁 的 男 一 个 方法 是 : 遵循 函数 式 编程 风格 。 


正如 第 1 章 中 所 说 ，React 的 声明 式 编程 提升 了 代码 的 可 读 性 。 

函数 式 编程 就 是 一 种 声明 式 范 式 ， 能 够 避免 代码 副作用 ,同时 它 推崇 数据 不 可 变 ， 以 便 更 易 
维护 与 考量 代码 。 

接 下 来 的 部 分 并 非 要 全 面 介 绍 函数 式 编程 ;而 只 是 介绍 React 普遍 使 用 的 一 些 概念 ,希望 你 
可 以 理解 它们 。 



















































































2.3.1 一 等 对 象 
JavaScript 的 函数 是 一 等 对 象 , 这 意味 着 它们 可 以 赋 给 变量 , 也 可 以 作为 参数 传递 给 其 他 函数 。 


这 时 要 介绍 一 下 高 阶 函 数 的 概念 了 。 高 阶 函数 接受 一 个 函数 作为 参数 ,也 可 以 传人 其 他 参数 ， 
最 后 返回 男 一 个 函数 。 返 回 的 函数 通常 会 添加 一 些 增强 的 特殊 行为 。 
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我 们 来 查看 一 个 简单 示例 , 一 个 两 数 相 加 的 函数 在 增强 后 先 打印 所 有 参数 ,再 接着 执行 原先 
的 逻辑 : 


const add = (x, y) => x+y 

CONSt. JOG & UNneG ss (rar 
console.log(...args) 
return func(...args) 


} 
const logAdd = log(add) 


理解 这 个 概念 非常 重要 , 因为 React 领域 的 一 个 常用 模式 是 使 用 高 阶 组 件 , 将 组 件 当 作 函 数 ， 
并 为 它们 增加 一 些 常 用 行为 。 第 4 章 将 介绍 高 阶 组 件 以 及 其 他 模式 。 








2.3.2 ”纯粹 性 


编写 纯粹 函数 是 函数 式 编程 的 一 个 重要 方面 。React 生态 系统 经 常会 遇 到 这 个 概念 ， 尤 其 是 
了 解 Redux 这 类 库 后 。 


函数 的 纯粹 性 到 底 指 什么 呢 ? 
纯粹 函数 是 指 它 不 产生 副作用 ， 也 就 是 说 它 不 会 改变 自身 作用 域 以 外 的 任何 东西 。 


举例 来 说 ， 如 果 函 数 改 变 了 应 用 状态 、 修 改 了 上 层 作用 域 定义 的 变量 , 或 者 与 DOM 这 样 的 
外 部 实体 发 生 了 交互 ， 那 么 该 函数 就 是 非 纯 粹 函数 。 


非 纯 粹 函数 很 难 调试 ， 而 且 大 多 数 时 候 不 可 能 多 次 调用 它们 并 期 望 得 到 同样 的 结果 。 
以 下 展示 的 就 是 纯粹 函数 






























































const add = (x, y) => X + Y 

它 可 以 运行 多 次 , 并 且 总 能 得 到 同样 的 结果 ， 因 为 没有 将 数据 存储 在 其 他 地 方 , 也 没有 修改 
任何 东西 。 

以 下 展示 的 就 是 非 纯粹 函数 : 


let X = 0 
const add =y => (x = X+Y) 


执行 aaa (1) 两 次 , 但 得 到 了 两 个 不 同 的 结果 。 第 一 次 是 1, 而 第 二 次 是 2, 尽管 我 们 是 用 同 
ee 一 个 函数 。 出 现 这 种 情况 的 原因 在 于 每 次 执行 都 修改 了 全 局 状态 。 


















































2.3.3 不 可 变性 
我 们 已 经 知道 了 如 何 编 写 不 改变 状态 的 纯粹 函数 , 但 需要 修改 变量 值 时 应 该 怎么 做 呢 ? 在 函 
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数 式 编程 中 ， 函 数 不 会 修改 变量 值 ， 而 是 创建 新 的 变量 ， 赋 新 值 后 再 返回 变量 。 操 作 数 据 的 这 种 
方式 称 为 不 可 变性 。 


不 能 修改 不 可 变 值 。 
我 们 来 查看 以 下 示例 : 








Const add3 = arr => arrpush(3) 
Gonst. myaArr Ss [1 2 

add3 (myArr) // [1, 2, 3] 

add3 (myArr) // [1, 2, 3, 3] 


上 述 代码 中 的 函数 没有 遵循 不 可 变性 ， 因 为 它 修改 了 给 定数 组 的 值 。 另 外 , 调用 这 个 函数 两 
次 会 得 到 不 同 结果 。 











可 以 用 concat 方法 改写 以 上 函数 ， 使 其 满足 不 可 变性 。concat 方法 会 返回 新 数组 ， 而 且 
不 会 修改 原 数组 : 








eonst adds 二 arkr cs% rroeoncat (3) 

CoOnst “myArr = [1; 2 

Gonst. result1 Ss add3 (myArr)y 7/7 [1,. 过 3] 
const result2 = adgd3 (myArr) // [1, 2, 3] 


此 时 即便 运行 该 函数 两 次 ，myArr 仍然 保有 初始 值 。 


2.3.4” 柯 里 化 


柯 里 化 是 函数 式 编程 的 常用 技巧 。 柯 里 化 过 程 就 是 将 多 参数 函数 转换 成 单 参 数 函 数 , 这 些 单 
参数 函数 的 返回 值 也 是 函数 。 我 们 通过 一 个 示例 来 弄 清 这 个 概念 。 


我 们 从 前 文 的 aaa 函数 入 手 ， 将 它 转 换 成 柯 里 化 函数 。 
原先 的 写法 如 下 所 示 : 
































const add = (x, y) => x +y 
将 其 定义 为 以 下 写法 : 

const add = x ->y ->x+y 
然后 按 以 下 方式 使 用 它 : 
const addl = add(1) 


add1(2) // 3 
add1l(3) // 4 


这 种 函数 写法 相当 方便 ,因为 传人 第 一 个 参数 后 , 第 一 个 值 被 保留 起 来 , 返回 的 第 二 个 函数 
可 以 多 次 复 用 。 
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2.3.5 组 合 

最 后 ， 可 以 用 于 React 的 函数 式 编程 中 的 另 一 个 重要 概念 是 组 合 。 函 数 ( 和 组 件 ) 可 以 结合 
产生 新 函数 ， 从 而 提供 更 高 级 的 功能 与 属性 。 

思考 以 下 函数 ; 

const add = (x, y) => X + Y 


Const square = x =>x*x 
这 两 个 函数 可 以 组 合 创 建 一 个 新 函数 ， 用 于 两 数 相 加 ， 再 对 结果 求 平 方 : 
const addAndSquare = (x, y) => square(add (x, y)) 


遵循 这 个 范式 就 可 以 编写 小 而 简单 、 易 于 测试 的 纯粹 函数 ， 然 后 再 将 它们 组 合 起 来 使 用 。 
































2.3.6 ”函数 式 编程 与 UI 
最 后 需要 学 习 的 就 是 如 何 用 函数 式 编程 构建 UI， 这 也 正 是 使 用 React 的 目的 。 
可 以 将 UI 看 作 传人 应 用 状态 的 函数 ， 如 下 所 示 


UI = f(state) 


我 们 希望 这 是 一 个 寡 等 函数 ， 即 传人 相同 的 应 用 状态 时 会 返回 同样 的 UI。 
使 用 React 时 ， 可 以 将 创建 UI 的 组 件 看 作 函 数 ， 后 文中 会 讲解 这 一 点 
组 件 可 以 组 合 形成 最 后 的 UI， 这 也 正 是 函数 式 编程 的 特性 之 一 。 


React 构建 UI 的 方式 和 函数 式 编程 原则 有 很 多 相似 之 处 ， 了 解 得 越 多 ， 也 就 能 写 出 越 好 的 
代码 。 





















































2.4 小 结 
本 章 介绍 了 大 量 有 关 JSX 工作 原理 的 内 容 , 以 及 如 何在 组 件 中 正确 使 用 JSX。 我 们 从 基础 语 
法 入 手 ， 黄 定 扎实 基础 以 掌握 JSX 及 其 特性 。 


第 二 部 分 将 介绍 ESLint 及 其 插件 如 何 帮 助 我 们 更 快 发 现 错误 ， 以 及 怎样 在 代码 库 中 强制 推 
行 一 致 的 风格 指南 。 


最 后 ， 我 们 介绍 了 汤 数 式 编程 的 基础 ， 以 理解 开发 React 应 用 所 需要 的 重要 概念 。 
现在 代码 已 经 足够 整洁 ， 接 下 来 我 们 将 深入 人 研究 React 并 学 习 如 何 编写 真正 可 复 用 的 组 件 。 

















开发 真正 可 复 用 的 组 件 











要 想 开发 真正 可 复 用 的 组 件 ， 我 们 需要 理解 React 提供 的 定义 组 件 的 多 种 方式 ， 并 知道 如 何 
根据 具体 情况 进行 选择 。React 引入 了 一 种 新 型 组 件 ， 人 允许 将 组 件 定 义 为 无 状态 函数 。 最 为 关键 
的 是 要 理解 这 种 组 件 ， 并 了 解 何 时 以 及 为 何 需要 使 用 它 。 


你 可 能 已 经 使 用 过 组 件 的 内 部 状态 , 但 仍然 不 太 了 解 其 使 用 时 机 以 及 可 能 产生 的 问题 。 最 好 
的 学 习 方式 就 是 阅读 代码 示例 , 我 们 将 从 一 个 只 有 单一 功能 的 组 件 入 手 , 然后 将 其 改造 为 可 复 用 
组 件 。 
我 们 将 先 回顾 基本 概念 ， 然 后 继续 深入 学 习 。 本 章 未 尾 将 创建 一 套 可 用 的 组 件 风格 指南 。 
本 章 包含 如 下 内 容 。 
口 创建 React 组 件 的 不 同方 式 以 及 如 何 进行 选择 。 
口 无 状态 函数 式 组 件 是 什么 ， 以 及 函数 式 组 件 与 状态 组 件 的 
口 状态 的 工作 原理 ， 以 及 何 时 应 该 避免 使 用 它 。 
口 为 什么 为 每 个 组 件 定义 清晰 的 prop 类 型 很 重要 ,以 及 如 何 根据 prop 类 型 用 React Docgen 
动态 地 生成 文档 。 
口 将 耦合 组 件 改造 为 可 复 用 组 件 的 实例 。 
口 如 何 使 用 React Storybook 创建 可 用 的 风格 指南 ， 以 便 为 可 复 用 组 件 提 供 文档 。 
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别 。 











3.1 创建 类 
第 1 章 中 介绍 了 React 如 何 利 用 元 素 将 组 件 显示 到 屏幕 上 。 
现在 我 们 来 了 解 一 下 React 定义 组 件 的 不 同方 式 以 及 使 用 各 方式 的 原因 。 


再 次 强调 ， 本 书 假设 你 已 经 在 中 小 型 应 用 中 使 用 过 React， 也 就 是 说 ， 你 应 该 具备 开发 组 件 
的 经 验 。 
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你 可 能 已 经 根据 React 官网 提供 的 示例 ,或 者 参照 搭建 项 目的 脚手架 模板 的 风格 选择 过 一 种 
方式 。 


你 应 该 清楚 地 了 解 prop、 状 态 和 生命 周期 方法 这 些 概念 ， 因 为 本 章 不 会 详细 介绍 这 些 内 容 。 


3.1.1 createClass 工厂 方法 





























可 以 查看 ( 编写 本 书 时 的 ) React 文 档 的 第 一 个 示例 , 它 展示 了 如 何 用 React .createClass 
来 定义 组 件 。 

先 从 一 段 很 简单 的 代码 开始 : 
const Button = React.createClass({ 

render() { 

return <button /> 

. 
} 
以 上 代码 创建 了 一 个 按钮 组 件 ， 并 且 应 用 的 其 他 组 件 也 可 以 引用 它 。 


可 以 用 纯 JavaScript 对 其 进行 改 瑟 ， 如 下 所 示 : 








const Button = React.createClass({ 
render() { 
return React.createElement ('button') 
} 
} 





无 须 用 Babel 进行 转译 即 可 在 任何 地 方 运行 以 上 代码 ， 这 样 做 有 利于 快速 上 手 React， 不 用 
花 时 间 学 习 React 生态 系统 中 的 各 种 工具 


~vo 





3.1.2 继承 React .Component 


定义 React 组件 的 第 二 种 方式 是 使 用 ES2015 语法 的 类 ,现代 浏览 器 广泛 支持 class 关键 词 ， 
不 过 为 了 稳 受 起见， 可 以 用 Babel 对 其 进行 转译 。 一 般 来 讲 ， 如 果 用 JSX 进行 编程 ， 那 么 Babel 
已 经 包含 在 工具 栈 中 。 


我 们 来 看 看 如 何 用 类 重 写 上 例 中 的 按钮 : 


class Button extends React.Component { 
render() { 
return <button /> 
} 
} 











这 种 全 新 的 组 件 定义 方式 随 着 React 0.13 发 布 ，Facebook 的 开发 人 员 和 希望 可 以 在 社区 中 推广 
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这 种 方式 。 举 例 来 说 ,Facebook 的 员工 Dan Abramov( 也 是 活跃 的 社区 成 员 ) 在 比较 createclass 
与 继承 Component 时 说 道 : 


“标准 化 的 ES6 类 是 更 好 用 的 利器 。” 








Facebook 希望 开发 人 员 使 用 后 者 ， 因 为 这 是 ES2015 标准 的 一 项 特性 , 但 createclass 工 
厂 方法 不 是 。 
3.1.3 ”主要 区 别 
除了 语法 方面 的 差异 ， 上 述 两 种 方法 还 有 以 下 几 项 主要 区 别 。 
已 


我 们 将 详细 介绍 这 些 区 别 , 以 便 你 可 以 掌握 完整 的 信息 ,从 而 根据 团队 情况 以 及 项 目 需求 做 
出 最 佳 选择 。 














1. prop 
第 一 个 区 别 在 于 如 何 定义 组 件 期 望 接收 的 prop 及 其 默认 值 。 
本 章 后 面 会 详细 介绍 prop 的 工作 原理 ， 目 前 我 们 先 专注 于 如 何 定义 它们 。 
createClass 方法 需要 在 作为 参数 传人 函数 的 对 象 内 定义 prop ,同时 在 getDefau1tProps 
内 返回 默认 值 : 
const Button = React .createClass ({ 
propTypes: { 


text: React.PropTypes.string, 
Fs 








getDefaultProps() { 
return { 
text: “CLIioKk Mer 
} 
J} 


render() { 
return <button>{this.props.text}</button> 
}) 
在 以 上 代码 中 ,我 们 用 propTypes 属性 列 出 了 能 够 传递 给 组 件 的 所 有 prop。 
接着 我 们 用 getDefaultProps 函数 定义 了 prop 的 默认 值 ， 如 果 父 组 件 中 传递 了 prop， 那 
么 对 应 的 默认 值 会 被 覆盖 。 


如 果 想 要 用 类 实现 同样 的 目的 ， 则 需要 用 到 稍微 不 同 的 结构 : 
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这 


class Button extends React .Component { 
render() { 
return <button>{this.props.text}</button> 
} 
} 


Button.propTypes = { 
text: React.PropTypes.string, 
} 


Button.defaultProps = { 
text: 'Click me!', 


} 


因为 类 属性 仍 处 于 草案 阶段 ( 尚未 成 为 ECMAScript 标准 的 一 部 分 )， 所 以 若 想 定义 类 的 属 


则 需要 在 创建 类 之 后 再 写 人 属性 。 





项) 


由 示例 可 见 ，propTypes 对 象 与 使 用 createclass 方式 创建 的 一 模 一 样 。 


在 设置 默认 的 prop 时 ， 我 们 原先 用 函数 来 返回 默认 属性 对 象 ， 但 在 使 用 类 时 ， 需 要 在 类 上 
定义 aefaultProps 属性 ， 再 将 默认 值 对 象 赋 给 它 。 








种 React 特 有 的 函数 。 


2. 状态 


createClass 工厂 方法 和 extends React .Compo 


始 状 态 的 定义 方式 不 同 。 
和 前 面 一 样 , 使 用 createclass 需要 调用 函数 , 而 使 用 ES2015 的 类 则 需要 设置 实例 的 属性 。 


我 们 来 看 一 个 示例 : 


const Button = React.createClass ({ 
getInitialState() { 
return { 
text: 'Click me!', 
} 
} 


render() { 
return <button>{this.state.text}</button> 
} 
} 








使 用 类 的 好 处 在 于 ， 只 需要 在 JavaScript 对象 上 定义 属性 ， 无 须 使 用 getDefaultProps 这 




















nent 方法 的 另 一 个 重大 区 别 是 , 组 件 初 























getInitialState 方 法 期 望 返 回 一 个 对 象 ， 该 对 象 包含 每 个 状态 属性 的 默认 值 。 


如 果 用 类 来 定义 初始 状态 ， 则 需要 在 类 的 构造 器 方法 内 设置 实例 的 状态 属 


一 





性 : 





此 
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class Button extends React.Component { 
constructor(props) { 
super (props) 


this.state = { 
text "CLicCk mer", 
} 
3 


render() { 
return <button>{this.state.text}</button> 


} 
} 


定义 状态 的 这 两 种 方式 等 效 ， 不 过 使 用 类 的 好 处 与 前 面 所 说 的 一 样 ， 即 无 须 使 用 React 特 有 
的 API， 直 接 在 实例 上 定义 属性 即 可 。 


在 ES2015 中 ， 若 想 在 子 类 中 使 用 his， 必须 先 调 用 super 方法 。React 还 会 将 props 对 象 
传 给 父 组 件 。 
3. 自动 绑 定 


createClass 有 一 项 非常 方便 的 特性 , 但 该 特性 也 会 隐藏 JavaScript 的 工作 原理 , 从 而 造成 
误解 ， 对 于 新 手 而 言 尤 其 如 此 。 这 项 特性 允许 我 们 创建 事件 处 理 器 ， 并 且 当 调用 事件 处 理 器 时 ， 
this 会 指向 组 件 本 身 。 


第 6 章 将 介绍 事件 处 理 咒 的 工作 方式 。 目 前 ， 我 们 只 专注 于 它们 与 当前 组 件 的 绑 定 方式 。 
查看 以 下 的 简单 示例 : 
































const Button = React.createClass({ 
handleClick() { 
console.log (this) 


}, 


render() { 
return <button onClick={this.handleClick} /> 
9 
}) 


createclass 人 允许 我 们 按照 以 上 方式 设置 事件 处 理 器 ， 这 样 一 来 ， 函 数 内 部 的 this 就 会 
指向 组 件 本 身 。 这 允许 我 们 调用 同一 组 件 实例 的 其 他 方法 。 例 如 ,调用 this.setstate() 或 者 
其 他 方法 所 产生 的 结果 都 能 符合 预期 。 

现在 我 们 来 看 看 this 在 类 中 的 差别 以 及 如 何 才 能 实现 同样 的 行为 。 按 照 以 下 方式 继承 
React .Component 并 定义 组 件 : 








class Button extends React.Component { 
handleClick() { 
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console.log (this) 


} 
render() { 
return <button onClick={this.handleClick} /> 
} 
} 


点 击 按钮 后 ， 控 制 台 输出 的 结果 为 nul1。 这 是 因为 函数 传 给 事件 处 理 器 后 丢失 了 对 组 件 的 
引用 。 


这 并 不 意味 着 不 能 在 类 中 使 用 事件 处 理 器 ， 只 是 我 们 需要 手动 绑 定 函数 。 

我 们 来 看 看 哪些 方案 可 供 采 纳 ， 以 及 它们 分 别 适 合 哪 种 场景 。 

你 可 能 已 经 知道 ，ES2015 提供 的 箭头 函数 可 以 自动 将 当前 的 this 绑 定 到 函数 体 。 
查看 这 段 代码 示例 : 

() => this.setState() 

Babel 会 将 以 上 代码 转译 为 以 下 代码 : 


var _this = this; 




















(function () { 
return _this.setState(); 
1 


可 以 得 知 ， 解 决 自动 绑 定 问题 的 一 种 可 能 方案 就 是 使 用 箭头 函数 ， 如 下 所 示 : 


class Button extends React.Component { 
handleClick() { 
console.log (this) 


} 














render() { 
return <button onClick={() => this.handleClick()} /> 
} 
} 
这 样 做 符合 预期 ,也 不 会 带 来 什么 特殊 问题 。 唯 一 的 缺点 在 于 ,如 果 在 意 性 能 ， 那么 就 需要 
理解 代码 的 本 质 。 


实际 上 , 在 泻 染 方法 中 绑 定 函数 会 带 来 无 法 预料 的 副作用 ， 因 为 每 次 泻 染 组 件 ( 应 用 在 生命 
周期 内 会 多 次 演 染 组 件 ) 时 都 会 触发 入 头 函 数 。 


虽然 在 演 染 方法 内 多 次 触发 某 个 函数 不 太 理 想 ,但 本 身 并 没有 什么 问题 。 
问题 在 于 ， 如 果 这 个 函数 传递 给 子 组 件 ， 那 么 子 组 件 在 每 次 更 新 过 程 中 都 会 接收 新 的 prop。 








40 第 3 章 开发 真正 可 复 用 的 组 件 





这 可 能 会 导致 低 效 的 泻 染 ， 进 而 引发 问题 ， 对 于 纯粹 组 件 而 言 尤其 如 此 (第 9 章 将 讨论 性 能 方面 
的 问题 )。 

解决 函数 绑 定 问题 的 最 佳 方案 是 在 构造 器 内 进行 绑 定 操作 , 这 样 即使 多 次 泻 染 组 件 , 它 也 不 
会 发 生 任何 改变 。 

class Button extends React .Component { 


constructor(props) { 
super (props) 








this.handleClick = this.handleClick.bind(this) 
} 


handleClick() { 
console.1log (this) 


} 


render() { 
return <button onClick={this.handleClick} /> 
} 
} 


就 是 这 样 ， 问 题解 决 了 ! 

















3.1.4 无 状态 函数 式 组 件 
还 有 男 一 种 定义 组 件 的 方式 ， 它 与 前 两 种 差别 很 大 。 
React 0.14 引入 了 这 个 方法 。 它 十 分 强大 ， 可 以 使 得 代码 更 易 维护 和 复 用 
我 们 先 来 了 解 这 个 方法 的 原理 及 功能 ， 然 后 再 探讨 其 适用 场景 。 
它 的 语法 相当 简洁 优雅 ,查看 以 下 示例 : 








O 














() => Button 

以 上 代码 创建 了 一 个 空 按 钮 , 简洁 的 箭头 函数 语法 使 得 其 代码 变 得 直观 且 极 具 表现 力 。 如 你 
所 见 ， 不 需要 使 用 createclass 工厂 方法 或 者 继承 Component, 定义 返回 结果 为 待 显示 元 素 
的 函数 即 可 。 

当然 ， 可 以 在 函数 体内 使 用 JSX 语法 。 

1. props 与 上 下 文 

不 能 从 父 组 件 接收 props 对 象 的 组 件 没有 多 大 用 人 处， 而 无 状态 函数 式 组 件 可 以 接收 props 对 
象 作为 参数 : 


props => <button>{props.text}</button> 
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此 外 ， 还 可 以 使 用 更 简洁 的 ES2015 解构 语法 : 
({ text }) => <button>{text}</button> 
定义 props 后 ， 像 继承 组 件 那 样 ， 无 状态 函数 就 可 以 通过 propTypes 属性 来 接收 props: 


const Button = ({ text }) => <button>{text}</button> 











Button.propTypes = { 
text: React.PropTypes.string, 
} 


无 状态 函数 式 组 件 也 接收 表示 上 下 文 的 第 二 个 参数 。 
(props, context) => ( 
<button>{context.currency} {props.value}</button> 

) 

2. 关键 词 this 

无 状态 函数 式 组 件 与 状态 组 件 的 一 项 区 别 在 于 ，this 在 无 状态 函数 式 组 件 的 执行 过 程 中 不 
指向 组 件 本 身 。 

由 于 这 个 原因 ， 与 组 件 实例 相关 的 set state 等 方法 以 及 生命 周期 方法 都 无 法 使 用 。 

3. 状态 

顾名思义 ， 无 状态 函数 式 组 件 没有 任何 内 部 状态 ， 这 正 是 因为 this 不 存在 所 导致 的 。 这 使 
得 无 状态 男 数 式 组 件 无 比 强大 ， 同 时 又 很 容易 使 用 。 





无 状态 函数 式 组 件 只 接收 props( 以 及 上 下 文 ) 参数 ， 并 返回 相应 元 素 。 这 体现 了 第 2 音 
提 到 的 函数 式 编程 的 原则 。 


4. 生命 周期 


es 





无 状态 函数 式 组 件 没有 提供 任何 像 componentDigMount 这 样 的 生命 周期 钩子 ; 它们 只 实 
现 了 一 个 类 似 泻 染 的 方法 ， 并 将 其 他 工作 都 交 由 父 组 件 来 执行 。 


5. ref 与 事件 处 理 器 
因为 无 状态 函数 式 组 件 不 能 访问 组 件 实例 ， 所 以 如 果 要 使 用 ref 或 者 事件 处 理 器 ， 需 要 按 以 
下 方式 来 定义 。 


() => { 
let input 


const onClick = () => input.focus() 


return ( 
<div> 
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<input ref={el => (input = el)} /> 
<button onClick={onClick}>Focus</button> 
</div> 
) 
. 


6. 没有 组 件 引 用 


无 状态 函数 式 组 件 的 另 一 个 不 同 点 在 于 ， 无 论 何 时 使 用 ReactTestutils (第 10 音 将 详细 
介绍 测试 ) 来 泻 染 它们 ， 都 无 法 取 回 对 组 件 的 引用 。 











例如 : 
const Button = React.createClass({ 
render() { 


return <button /> 
js 
}) 


const component = ReactTestUtils.renderIintoDocument (<Button />) 


在 以 上 示例 中 ， 组 件 表示 Button。 


Const. .Button se: () =3 button. > 
const component = ReactTestUtils.renderIintoDocument (<Button />) 


但 这 个 示例 中 的 组 件 为 aul1， 将 组 件 包 庄 在 一 个 <aiv> 标 签 中 是 一 种 解决 方法 ， 如 下 所 示 。 


Const component = Reac tTestUtils.renderIintoDocument 
(<div><Button/></div>) 


7. 优化 


使 用 无 状态 函数 式 组 件 需要 牢记 一 点 : 虽然 Facebook 的 开发 人 员 宣 称 以 后 会 为 无 状态 组 件 
提供 性 能 优化 ， 但 在 编写 本 书 时 ， 他 们 还 没有 明显 的 行动 。 


实际 上 ， 因 为 没有 shouldcomponentUpdate 方法 ， 所 以 无 法 通知 React 只 在 props ( 或 某 
个 特定 prop ) 变化 时 才 泻 染 函 数 式 组 件 。 


虽然 这 不 是 什么 大 问题 ,但 也 值得 考虑 。 















































/ 





3.2 ”状态 
我 们 已 经 学 习 了 如 何 用 工厂 方法 、 继 承 React 类 或 者 无 状态 函数 式 组 件 来 创建 组 件 。 
现在 我 们 来 深入 学 习 与 状态 相关 的 主题 ， 了 解 为 何 使 用 它 极 其 重要 并 和 弄 清 其 工作 原理 。 


我 们 将 学 习 何 时 应 该 使 用 无 状态 函数 ,而 不 是 状态 组 件 , 以 及 为 何 这 代表 了 组 件 设计 的 一 项 
基本 决策 。 
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3.2.1 外 部 库 
首先 ， 重点 在 于 理解 为 何 要 考虑 在 组 件 中 使 用 状态 ， 以 及 它 为 什么 能 够 提供 多 种 帮助 。 





大 部 分 React 教程 或 者 构建 模板 都 包括 了 管理 应 用 状态 的 外 部 库 ， 如 Redux 或 MobX。 





这 就 造成 了 一 种 普遍 误解 ， 即 只 靠 React 无 法 写 出 有 状态 的 应 用 ， 而 事实 远 非 如 此 。 























最 明显 的 后 果 就 是 许多 开发 者 尝试 同时 学 习 React 和 Redux， 以 至 于 他 们 从 未 和 弄 清楚 如 何 正 
确 使 用 React 状态 。 





本 节 的 目的 就 是 弄 清楚 如 何 正确 使 用 状态 ， 并 理解 为 何某 些 情况 下 不 需要 任何 外 部 库 。 


3.2.2 ”工作 原理 


除了 工厂 方法 和 继承 Component 声明 初始 状态 的 方式 不 同 ,我 们 学 习 的 另 一 个 重要 概念 是 ， 
每 个 有 状态 的 React 应 用 都 可 以 拥有 初始 状态 。 























在 组 件 的 生命 周期 中 ， 可 以 使 用 生命 周期 方法 或 者 事件 处 理 器 中 的 setstate 多 次 修改 状 
态 。 当 状态 发 生变 化 时 ，React 就 用 新 状态 泻 染 组 件 ， 这 也 是 文档 经 常 提 到 React 组 件 类 似 状 态 
机 的 原因 。 








用 新 状态 (或 者 其 中 一 部 分 ) 调 用 setstate 方法 时 , 对 象 会 合并 到 当前 状态 上 。 举例 来 说 ， 
假设 初始 状态 如 下 所 示 : 
this.state = { 


text: 'Click me!', 


} 
接着 用 新 参数 调用 set state: 


this.setState({ 
cliked: true, 
} 


最 终 的 状态 如 下 所 示 : 
{ 
cliked: true, 


texts “Click me 


当 状 态 发 生 改 变 时 ,React 会 再 次 执行 演 染 方法 ,因此 除了 设置 新 状态 , 我 们 不 用 做 任何 事 。 











然而 某 些 情况 下 可 能 需要 在 状态 更 新 完成 时 执行 一 些 操作 ，React 为 此 提供 了 一 个 回调 
数 : 


器 
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this.setStatel(lt{ 
clicked: true, 
二 
console.log('the state is now', this.state) 


}) 
将 任意 函数 作为 set state 的 第 二 个 参数 传递 , 状态 更 新 完成 时 会 触发 该 函数 , 同时 组 件 完 








应 该 总 是 将 set state 方法 当 作 异步 的 ， 因 为 官方 文档 的 介绍 如 下 所 示 : 
无 法 确保 调用 setstate 的 同步 操作 […… ] 


实际 上 ,如果 在 事件 处 理 器 中 触发 了 setstate 后 , 尝试 将 当前 状态 值 打 印 到 控制 台中 ，, 那 
么 获得 的 是 旧 状 态 值 : 


handleClick() { 
this.setStatel(lt{ 
clicked: true, 
小 
console.log('the state is now', this.state) 


} 











render() { 
return <button onClick={this.handleClick}>Click me!</button> 
} 


以 上 述 代 码 段 为 例 ， 控 制 台 上 将 会 输出 the state is now null。 发 生 这 种 情况 的 原因 
在 于 React 知道 如 何 优化 事件 处 理 需 内 部 的 状态 更 新 ， 并 进行 批 处 理 ， 以 获得 更 好 的 性 能 。 


如 果 稍 微 修改 一 下 代码 : 


handleClick() { 
setTimeout (() => { 
this.setStatel(lt{ 
clicked: true, 


}) 








console.log('the state is now', this.state) 
} 
} 


结果 将 是 : 


the state is now Object {clicked: true} 
这 与 我 们 一 开始 预料 的 一 样 ， 因 为 React 无 法 优化 执行 过 程 ， 只 能 尝试 尽快 更 新 状态 。 
意 ， 示 例 使 用 setTimeout 只 是 为 了 展示 React 的 行为 ， 你 永远 不 要 这 样 编写 事件 监听 器 。 
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3.2.4 React lumberjack 
前 文 提 过 ，React 的 工作 方式 很 像 状 态 机 ， 每 当 状 态 改 变 就 重新 泻 染 。 得 益 于 这 个 特点 ,我 
们 可 以 应 用 或 撤销 状态 变化 ， 并 在 整个 过 程 中 前 进 或 者 后 退 ， 这 对 调试 很 有 帮助 。 


react-lumberjack 库 对 于 理解 以 上 内 容 相 当 有 用 。 它 的 作者 Ryan Florence 参与 开发 了 最 
流行 的 React 库 之 一 : react-router。 


react-lumberjack 的 使 用 非常 简单 ， 不 过 要 记得 在 生产 环境 中 禁用 它 。 可 以 像 任 何 npm 0 
包 一 样 安装 并 导入 ， 也 可 以 直接 按 以 下 方式 从 https://unpkg.com 引用 它 。 




















<script src="https://unpkg.com/react-lumberjack@1.0.0"></script> 
脚本 加 载 完成 后 ， 只 需要 使 用 应 用 让 组 件 修改 自身 的 状态 即 可 。 
如 果 某 个 地 方 出 错 或 者 想 要 调试 应 用 的 某 个 特殊 状态 ， 可 以 打开 控制 台 并 输入 以 下 代码 : 
Lumberjack. back() 
上 述 代 码 可 以 在 时 间 上 回 退 并 撤销 状态 的 改变 ， 表 查看 以 下 代码 : 
Lumberjack. forward () 
上 述 代 码 可 以 在 时 间 上 前 进 并 重新 应 用 状态 的 改变 。 


这 个 库 处 于 试验 阶段 ， 不 远 的 将 来 可 能 会 消失 ， 也 可 能 成 为 React 开发 者 工具 的 一 部 分 ,我 
们 提 到 它 是 为 了 向 你 展示 状态 工作 原理 的 实例 。 









































3.2.5 ”使 用 状态 


现在 我 们 已 经 知道 了 状态 的 工作 原理 , 接 下 来 需要 理解 其 使 用 时 机 以 及 何 时 应 该 避免 在 状态 
中 保存 值 。 


如 果 遵 循 规 则 ,那么 就 能 轻易 搞 清 楚 组 件 设计 成 无 状态 或 有 状态 的 时 机 , 以 及 如 何 处 理 状态 ， 
以 便 可 以 在 整个 应 用 中 复 用 组 件 。 


首先 ， 应 该 牢记 只 能 将 满足 需求 的 最 少数 据 放 到 状态 中 。 

举例 来 说 ,如 果 要 在 点 击 按钮 时 改变 标签 , 那么 此 时 不 应 该 保存 标签 文本 ， 只 需要 保存 布尔 
标记 来 表示 是 否 已 经 点 击 按钮 。 

这 样 就 是 正确 使 用 了 状态 ， 我 们 可 以 始终 根据 布尔 标记 重新 计算 不 同 的 值 。 

其 次 ,触发 事件 时 只 应 将 需要 更 新 的 值 添 加 到 状态 中 ， 然 后 重新 渲染 组 件 。 

isclicked 标记 和 提交 前 的 输入 框 的 值 都 是 很 好 的 示例 。 
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总 的 来 说 ， 应 该 只 将 记录 当前 UI 所 需 的 信息 保存 到 状态 中 ， 如 标签 菜单 的 当前 选中 项 。 

判断 状态 是 否 适合 保存 信息 的 另 一 种 方式 是 检查 组 件 外 部 或 子 组 件 是 否 需 要 我 们 所 维护 的 
数据 。 

如 果 多 个 组 件 都 需要 跟踪 同一 份 信息 , 那么 应 该 考虑 使 用 应 用 层级 的 状态 管理 器 , 如 Redux。 

接 下 来 我 们 将 看 看 哪些 情况 下 应 该 避免 使 用 状态 ， 以 遵循 最 佳 实践 指南 。 

1. 可 派生 的 值 

只 要 能 根据 props 计算 最 终 值 ， 就 不 应 该 将 任何 数据 保存 在 状态 中 。 


例如 ， 如 果 从 props 接收 了 货币 单位 及 价格 ， 且 总 要 一 同 展示 它们 ， 那 么 我 们 可 能 会 认为 将 
它 保 存在 状态 中 更 好 ， 并 在 泻 染 方法 内 使 用 状态 值 ， 如 下 所 示 : 
class Price extends React .Component { 


constructor(props) { 
super (props) 


















































this.state = { 
price: ‘S${props.currency}s${props.value}. 
} 
} 


render() { 
return <div>{this.state.price}</div> 
} 


如 果 在 父 组 件 中 按照 以 下 方式 创建 ， 那 么 这 种 做 法 是 可 行 的 : 





<Price currency="f£" value="100" /> 


问题 在 于 ， 如 果 货 币 单位 或 价格 在 Price 组 件 的 生命 周期 内 发 生 改 变 ， 则 永远 不 会 重新 计 
状态 〈 因为 只 会 调用 构造 器 一 次 )， 应 用 就 会 显示 错误 的 价格 。 


因此 ， 只 要 可 以 ,就 应 该 用 props 来 计算 值 。 
参考 前 面 章 节 的 做 法 ， 可 以 直接 在 演 染 方法 中 使 用 一 个 辅助 函数 : 


算 


Sz 
































GetPrice() { 
return ‘Ss{this.props.currency}s{this.props.value}. 


} 

2. 泻 染 方法 

始终 牢记 ， 设 置 状 态 会 触发 组 件 重 新 泻 染 。 因 此 ， 应 该 只 将 泻 染 方 法 要 用 到 的 值 保存 在 状 
态 中 。 

















举例 来 说 , 如 果 需 要 保存 组 件 要 用 到 的 API 订阅 或 超时 变量 , 而 这 些 数据 又 不 会 影响 泻 染 过 
程 ， 那 么 应 该 考虑 将 它们 放 入 独立 模块 。 

以 下 代码 的 做 法 是 错误 的 , 因为 之 后 要 用 的 值 位 于 状态 中 , 但 演 染 方法 又 没有 用 到 ， 这 会 在 
设置 新 状态 时 触发 一 次 不 必要 的 演 染 : 


























ComponentDidMount () { 
this.setState({ 
request: API.get(...) 
}) 
} 





componentWillUnmount () { 
this.state.request.abort () 


} 
就 上 述 场景 而 言 ， 更 好 的 做 法 是 将 API 请 求 保存 在 外 部 模块 中 。 


另 一 种 常见 做 法 是 将 请 求 保存 为 组 件 实例 的 私有 成 员 : 
































ComponentDidMount () { 
this.request = API.get(...) 

} 

componentWillUnmount () { 


this.request.abort () 
} 


这 种 做 法 将 请 求 封装 到 组 件 内 部 , 但 不 会 影响 状态 ,因此 , 值 发 生 改变 时 也 就 不 会 触发 任何 
额外 演 染 。 


Dan Abramov 创建 了 一 张 速记 图 来 帮助 我 们 做 出 正确 选择 ， 如 下 所 示 : 











function 
pi a 


return false 


if C 


return false 


了 


return true 
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3.3 ”prop 类 型 
我 们 的 目的 是 开发 真正 可 复 用 的 组 件 ,为 了 实现 这 一 目的 ,需要 尽 可 能 清晰 地 定义 组 件 接 口 。 
如 果 希 望 整个 应 用 可 以 复 用 组 件 ,关键 要 确保 清晰 地 定义 组 件 及 其 参数 , 以 便 能 够 直观 使 用 。 


React 提供 了 一 个 可 以 非常 简单 地 表达 组 件 接口 的 强大 工具 ， 只 要 提供 组 件 期 望 接收 的 prop 
名 称 与 对 应 的 验证 规则 即 可 。 


与 属性 类 型 相关 的 规则 也 包含 该 属性 为 必 选 还 是 可 选 , 还 提供 了 用 于 编写 自 定义 验证 函数 的 





























查看 以 下 简单 示例 : 


const Button = ({ text }) => <button>{text}</button> 





Button.propTypes = { 
text: React.PropTypes.string, 
} 


以 上 代码 段 创建 了 一 个 无 状态 函数 式 组 件 ， 以 接收 一 个 类 型 为 字符 串 的 文本 prop。 
非常 好 ， 这 样 一 来 ， 需 要 用 到 该 组 件 的 每 个 开发 人 员 都 知道 如 何 正 确 使 用 了 。 

然而 ， 有 时 仅 添 加 属性 还 不 够 ， 因 为 这 无 法 告知 我 们 没有 该 属性 时 组 件 能 和 否 正 常 工作 。 
例如 ， 没 有 文本 的 情况 下 ， 按 钮 组 件 无 法 正常 操作 ， 解 决 方法 就 是 将 该 prop 标记 为 必需 : 











Button.propTypes = { 
text: React.PropTypes.string.isRequired, 
} 


如 有 果 某 个 开发 人 员 在 另 一 个 组 件 中 使 用 了 按钮 组 件 , 却 没有 设置 文本 属性 , 那么 浏览 器 控制 


台 就 会 给 出 以 下 警告 : 














Failed prop type: Required prop ‘text. was not specified 
in ‘Button.. 


需要 强调 的 是 ， 这 种 警告 只 会 在 开发 模式 下 出 现 。 生 产 版 本 的 React 出 于 性 能 原因 禁用 了 
propTypes 验证 。 
React 提供 了 多 种 开 箱 即 用 的 验证 器 : 从 数组 到 数字 类 型 ， 再 到 组 件 类 型 。 

它 还 提供 了 oneof 这 样 的 工具 函数 ， 以 接受 对 某 个 特定 属性 有 效 的 类 型 数组 。 
































记 住 ， 我 们 应 该 始终 将 基本 类 型 的 prop 传 给 组 件 ， 因 为 它们 更 容易 验证 和 比较 (第 10 章 将 
介绍 这 种 做 法 的 优势 )。 
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传递 单一 基本 类 型 的 prop 有 助 于 判断 组 件 接口 是 否 过 泛 ， 以 及 是 否 应 该 对 其 进行 拆 分 。 


如 果 意 识 到 茶 个 组 件 声 明了 太 多 prop, 而 且 它 们 之 间 没 有 关联 , 更 好 的 做 法 是 将 组 件 纵向 拆 
分 为 多 个 组 件 ， 然 后 每 个 组 件 附 带 少量 的 prop 和 职责 。 


然而 某 些 情况 下 不 可 避免 地 要 传递 对 象 ， 此 时 需要 用 模型 来 定义 propType。 
模型 函数 允许 我 们 声明 包含 钳 套 属性 的 对 象 ， 并 为 每 个 属性 定义 类 型 。 


举例 来 说 ， 如 果 要 创建 Profile 组 件 ， 且 该 组 件 需 要 传人 用 户 对 象 ， 其 中 包括 必需 的 名 字 
属性 以 及 可 选 的 姓氏 属性 ， 则 可 以 按照 以 下 方式 定义 : 









































const Profile = ({ user }) =>( 
<div>{user.name} {user.surname}</div> 


) 


Profile.propTypes = { 
user: React.PropTypes.shapelt{ 
name: React.PropTypes.string.isRequired, 
surname: React.PropTypes.string, 
}) .isRequired, 


} 
如 果 React 现 有 的 propTypes 无 法 满足 需求 ， 那 么 我 们 可 以 创建 自 定义 函数 来 验证 属性 : 





user: React .PropTypes .shape({ 
age: (props, propName) => { 
if (!(props[propName] > 0 && props[propName] < 100)) { 
return new Error(‘s$s{propName} must be between 1 and 99°.) 
} 
return null 
} 
} 


例如 ， 上 述 代码 段 验证 了 年 龄 字段 是 否 属于 特定 区 间 ; 如 果 不 属于 ， 则 返回 错误 。 














React Docgen 


得 益 于 prop 类 型 ， 组 件 的 边界 已 经 定义 得 很 清晰 了 ， 我 们 还 可 以 进行 男 一 个 操作 ， 以 便 它 
们 更 易 使 用 和 共享 。 


诚然 ， 如果 prop 类 型 的 名 称 与 类 型 都 很 清晰 ， 开 发 人 员 应 该 就 能 充分 利用 它们 ， 但 我 们 可 
以 做 得 更 好 。 


可 以 从 prop 类 型 的 定义 起 步 ， 自 动 为 组 件 生成 文档 。 
react-docgen 库 可 以 实现 这 个 日 的 ， 执 行 以 下 命令 来 安装 这 个 库 : 


npm install --global react-docgen 
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React Docgen 会 读 取 组 件 的 源 代码 ， 并 从 prop 类 型 及 其 注释 中 提取 相关 信息 。 
回 到 我 们 最 初创 建 的 按钮 组 件 示 例 : 
const Button = ({ text }) => <button>{text}</button> 


Button.propTypes = { 
text: React.PropTypes.string, 
} 


接着 执行 以 下 代码 : 
react-docgen button.js 


会 得 到 以 下 对 象 : 


"description"™: ™", 
"methods": []， 
"BEGPS":  { 
"text": { 
"type": { 
"name": "string" 

?a 

"required": false, 

"description™: ™™" 


} 
以 上 的 JSON 对 象 表 示 组 件 的 接口 。 其 中 的 props 属 
接着 查看 添加 注释 后 的 情况 : 








上 








/** 
* A generic button with text. 
i 
const Button = ({ text }) => <button>{text}</button> 


Button.propTypes = { 
/** 
* The text of the button. 
人 
text: React.PropTypes.string, 














再 次 执行 命令 会 得 到 以 下 结 








"description": "A generic button with text.", 
"methods": [], 
"props": { 
Wl =D dl 
"type": { 


生 包括 了 类 型 为 字符 串 的 文本 属性 。 
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S51 
"name": "string" 
} 
"required": false, 
"description": "The text of the button 
} 
} 


} 


现在 可 以 利用 返回 的 对 象 来 创建 文档 ， 并 与 团队 成 员 共享 或 发 布 到 GitHub 
输出 结 


吉 果 为 JSON 实际 上 使 得 这 项 工具 变 得 非常 灵活 ， 因 为 用 JSON 对 象 填 
生成 网 页 。 











组 件 文档 的 用 例 可 以 参见 优秀 的 Material UI 库 , 其 所 有 文档 都 是 根据 源 代码 











用 docgen 提供 
自动 生成 的 。 
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我 们 已 经 了 解 了 创建 组 件 的 最 佳 方式 及 应 该 使 用 本 地 状态 的 场景 ,我 们 还 学 习 了 如 何 用 prop 
类 型 定义 清晰 的 接口 ， 以 便 组 件 可 以 复 用 。 

现在 我 们 来 看 一 个 真实 示例 , 研究 如 何 将 一 个 不 可 复 用 的 组 件 改 成 接口 清晰 通用 的 可 复 用 
组 件 。 


假设 组 件 从 API 路 径 加 载 一 个 消 ， 








息 集 合 ， 并 在 屏幕 上 显示 列表 。 


文 个 示例 很 简单 ， 但 对 于 理解 使 得 组 件 可 复 用 的 必要 步骤 很 有 用 
组 件 的 定义 方式 如 下 所 示 : 





class PostList extends React.Component 


其 中 包括 构造 器 和 一 个 生命 周期 方法 : 


constructor(props) { 
super (props) 
this.state = { 
posts: [], 
} 
} 


componentDidMount () 


{ 
Posts.fetch() .then(posts => { 
this.setState({ posts } 
} 


} 
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一 个 空 数组 被 赋 给 消息 ， 以 表示 初始 状态 。 
调用 componentDiqdMount 时 会 触发 API 调 用 ， 取 回 的 数据 将 保存 到 状态 中 。 
这 种 数据 获取 模式 相当 常见 ， 第 5 章 将 介绍 更 多 可 用 方式 。 









































辅助 类 Posts 用 来 与 API 通信 ， 它 的 获取 方法 会 返回 一 个 Promise 对 象 ， 请 求 成 功 后 会 返 





回 消息 列表 。 











现在 我 们 来 看 看 显示 消息 列表 部 分 的 代码 : 


render() { 
return ( 





<ul> 
{this.state.posts.map(post => ( 
<11 key={post.id}> 
<hil>{post.title}</hi> 
{post.excerpt && <p>{post.excerpt}</p>} 
</1i> 
和 
LS 
) 
} 


我 们 在 render 方法 内 遍历 了 消息 ， 并 将 其 中 的 每 条 消息 都 映射 为 <1i > 元素 。 
假设 始终 需要 显示 标题 字段 ， 并 将 它 包 于 在 <h1> 标 签 中 ， 而 摘要 属性 是 可 选 的 ， 如 果 存 在 ， 




















就 显示 在 段落 中 。 





上 述 组 件 可 以 正常 工作 ， 而 且 没 有 任何 问题 。 





现在 ,假设 我 们 需要 泻 染 一 个 类 似 的 列表 ， 不 过 这 次 想 要 显示 的 是 从 props 而 不 是 状态 中 获 


取 的 用 户 列表 ( 以 明确 表示 我 们 能 应 对 不 同 场景 ): 


const UserList = ({ users }) => ( 
<ul> 
{users.map(user => ( 
<11 key={user.id}> 
<hil>{user.username}</hi1i> 
{user.bio && <p>{user.bio}</p>} 
</1i> 
) ) } 
让 二 


) 
传人 用 户 集合 ， 上 述 代码 会 泻 染 与 消息 示例 类 似 的 无 序列 表 。 
不 同 之 处 在 于 标题 ( heading )， 本 例 中 的 标题 是 用 户 名 ， 而 非 之 前 的 消息 标题 ; 还 有 可 选 部 




















分 要 换 成 用 户 的 简历 属性 ， 如 果 存 在 ， 就 显示 出 来 。 
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复制 代码 往往 不 是 最 佳 解决 方案 ， 因 此 我 们 来 看 看 React 如 何 帮 助 代码 符合 DRY (don't 
repeat yourself， 不 要 重复 自己 ) 原则 。 第 一 步 先 创建 可 复 用 的 列表 组 件 ， 通 过 定义 通用 的 集合 属 
性 ， 对 该 列表 组 件 做 一 些 抽 象 并 与 显示 的 数据 解 耦 。 最 主要 的 需求 在 于 ， 消 息 列表 要 显示 标题 和 
摘要 属性 ， 而 用 户 列 表 要 显示 用 户 名 和 简历 属性 。 






































为 了 实现 这 个 需求 ,我 们 创建 两 个 prop: titleKey 用 于 指定 需要 显示 的 属性 名 ,textKey 
则 用 于 指定 可 选 部 分 。 


可 复 用 的 新 List 的 prop 如 下 所 示 





List.propTypes = { 
collection: React.PropTypes.array, 
textKey: React.PropTypes.string, 
titleKey: React.PropTypes.string, 
} 


由 于 List 组 件 不 会 包含 任何 状态 或 函数 ， 可 以 将 其 写 为 无 状态 函数 式 组 件 : 


const List = ({ collection, textKey, titleKRkey }) => (人 
<ul> 
{collection.map (item => 
<Item 


key={item.id} 
text={item[textKey]} 
title={item[titleKey]} 
/> 
局， 
</ul> 


) 


List 组 件 接收 prop， 并 对 集合 进行 迭代 , 将 所 有 数据 项 映射 为 (将 要 创建 的 ) 男 一 个 组 件 。 
如 你 所 见 ， 子 组 件 传 人 了 标题 和 文本 这 两 个 prop， 分 别 表示 主 属性 和 可 选 属 性 的 值 。 


Item 组件 非常 简洁 ; 














const Item = ({ text, title }) => ( 
之 LS 
<h1l>{title}</h1l> 
{text && <p>{text}</p>} 
</1i> 


) 


Item.propTypes = { 
text: React.PropTypes.string, 
title: React.PropTypes.string, 
} 


至 此 , 我 们 创建 了 两 个 接口 清晰 的 组 件 ,可 以 用 它们 来 显示 消息 、 用 户 以 及 任何 其 他 类 型 的 
列表 。 小 型 组 件 有 很 多 优点 : 它们 更 易 维 护 与 测试 ，bug 的 定位 与 修复 也 更 方便 。 
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非常 好 ， 现 在 可 以 重 写 PostList 和 UserList 组 件 了 ， 以便 这 两 个 组 件 可 以 使 用 通用 的 
可 复 用 列表 并 能 够 避免 代码 重复 。 


修改 PostList 组 件 的 泻 染 方法 ， 如 下 所 示 





render() { 
return ( 
<List 
collection={this.state.posts} 
textKey="excerpt" 
titleKkey="title" 
/> 
) 
} 


UserList 组 件 同 理 : 





const UserList = ({ users }) => ( 
<List 
collection={users} 
textKey="bio" 
titleKey="username" 
/> 
) 


我 们 用 prop 创建 通用 清晰 的 接口 ， 使 得 一 个 面向 单一 需求 的 组 件 变 得 可 复 用 。 


现在 可 以 在 应 用 中 多 次 复 用 这 个 组 件 了 。 有 了 prop 类 型 的 帮助 后 ， 每 个 开发 人 员 都 能 轻易 
理解 它 的 实现 。 


再 进一步 ， 可 以 用 react-docgen 为 这 个 可 复 用 列表 生成 文档 ， 具 体 做 法 参考 前 文 。 
用 可 复 用 组 件 代 替 与 数据 耘 合 的 组 件 好 处 非常 多 。 


举例 来 说 , 假设 我 们 想 要 添加 新 的 逻辑 ， 以 实现 点 击 按 钮 时 隐藏 或 显示 可 选区 域 ; 或 者 新 的 
需求 是 检查 标题 属性 是 否 超 过 25 个 字符 ， 超 过 就 要 截断 并 加 上 连 字符 。 


此 时 我 们 只 需要 修改 一 处 代码 ， 用 到 该 组 件 的 所 有 组 件 就 都 能 获得 本 次 修改 成 果 。 





























3.5 可 用 的 风格 指南 


创建 API 清 晰 的 可 复 用 组 件 能 很 好 地 在 应 用 内 避免 代码 重复 , 但 这 可 不 是 可 复 用 性 值得 关注 
的 唯一 理由 。 


实际 上 ， 创 建 接受 清晰 的 prop 并 与 数据 解 碍 的 简 清 组 件 是 与 团队 其 他 成 员 共 享 基 础 组 件 库 
的 最 佳 方式 。 基 础 通用 且 可 复 用 的 组 件 可 以 作为 开 箱 即 用 组 件 , 你 可 以 将 它们 共享 给 团队 中 的 其 
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他 开发 人 员 或 者 设计 师 。 


例如 ,我 们 在 前 文 创建 了 标题 与 摘要 文本 的 通用 列表 , 正 因为 与 所 显示 的 数据 解 簿 ， 所 以 可 
以 在 应 用 中 多 次 使 用 它 ， 只 要 传 入 正确 的 prop 即 可 。 如 果 必 须 实现 新 的 分 类 列表 ， 只 要 将 分 类 
集合 传递 给 列表 组 件 就 可 以 了 。 


问题 在 于 , 新 的 开发 人 员 有 时 很 难 确定 某 些 组 件 是 否 已 经 存在 或 者 需要 新 增 。 解决 方案 通常 
是 创建 一 套 风格 指南 ; 这 是 一 个 非常 强大 且 高 效 的 工具 ， 可 以 在 团队 内 共享 一 套 元 素 。 


风格 指南 收集 了 可 以 跨 页 面 使 用 的 每 个 应 用 组 件 ， 并 提供 视觉 展示 。 它 非常 有 用 ,可 以 在 拥 
有 不 同 技能 的 团队 成 员 间 交换 信息 ， 并 随 着 时 间 及 组 件数 量 的 增加 保持 风格 一 致 。 


遗憾 的 是 ， 创 建 Web 应 用 的 风格 指南 没 那么 容易 ， 因 为 问题 往往 不 够 明确 ， 而 且 实 现 需求 
上 的 细微 差别 要 重复 实现 某 些 元 素 。React 为 此 提供 了 很 大 帮助 ， 它 创建 了 定义 清晰 的 组 件 ， 并 
提供 了 一 套 风 格 指南 ， 因 此 不 需要 我 们 再 花 什 么 精力 。 

不 是 只 有 React 可 以 使 得 开发 可 复 用 组 件 变 得 更 简单 ， 其 他 工具 也 能 帮助 我 们 按照 组 件 自身 
的 代码 来 构建 一 套 视觉 展示 库 ， 其 中 之 一 就 是 react-storybook。 

React Storybook 分 离 了 组 件 ， 因 此 无 须 运 行 整 个 应 用 就 能 泻 染 单个 组 件 ， 这 对 开发 和 测试 来 
说 都 非常 完美 。 

正如 名 字 所 描述 的 那样 ，React Storybook 允许 你 编写 故事 文档 来 表示 组 件 的 可 能 状态 。 举 例 
来 说 ， 如 果 要 创建 一 个 竺 办 事项 列表 ， 可 以 编写 故事 文档 来 表示 选中 事项 ， 再 用 另 一 个 故事 文档 
来 描述 未 选中 事项 。 

这 个 工具 在 跨 团 队 共享 组 件 方面 非常 强大 , 还 能 改进 与 其 他 开发 人 员 的 合作 。 只 要 查看 已 有 
的 故事 文档 , 刚 加 入 公司 的 开发 人 员 就 能 弄 清 是 否 需 要 创建 新 组 件 , 或 者 是 否 已 经 有 组 件 可 以 解 
决 某 个 特定 问题 。 


我 们 将 Storybook 应 用 到 前 面 章 节 中 的 List 组 件 示例 。 首 先 需 要 安装 这 个 库 : 







































































npm install --save @kadira/react-storybook-addon 
安装 完成 后 ， 就 可 以 开始 编写 故事 文档 。 


列表 项 包含 必需 的 标题 属性 和 可 选 的 文本 属性 ， 因 此 至 少 需要 编写 两 条 文档 来 表示 相应 


故事 文档 通常 放 在 名 为 stories 的 文件 夹 中 , 这 个 文件 夹 可 以 位 于 组 件 文件 夹 下 或 者 文件 目录 
中 任何 合适 的 地 方 。 


你 可 以 在 stories 文件 夹 下 为 每 个 组 件 创建 一 个 文件 。 
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本 示例 将 在 listjs 中 定义 故事 文档 。 

首先 ， 从 库 中 导入 主要 函数 ; 

import { storiesOf } from 'ekadira/storybook， 
接着 用 此 函数 来 定义 故事 文档 ， 如 下 所 示 : 


storiesOf ('List', module) 
.add('without text field', () => ( 
<List collection={posts} titleKey="title" /> 
本 


可 以 用 storiesof 函数 定义 组 件 名 ， 并 添加 相应 的 故事 文档 ， 每 条 文档 包括 一 段 描 述 以 及 
一 个 函数 ， 该 函数 必须 返回 将 要 泻 染 的 组 件 。 


假设 posts 是 与 React 相关 的 博客 消息 集合 ， 如 下 所 示 : 


const posts = [ 
t 
下 对 二 二 
title: 'Create Apps with No Configuration', 
i 
{ 
a 
title: 'Mixins Considered Harmful', 

















}, 
] 


运行 Storybook 并 查看 组 件 的 视觉 展示 前 ， 需 要 进行 配置 。 
先 在 应 用 的 根 文件 夹 下 创建 .storybook 文件 夹 。 
然后 在 .storybook 文件 夹 下 创建 config.js 文件 来 加 载 故 事 文档 : 














import { configure } from '@kadira/storybook' 
function loadStories() { 
require('../src/stories/list') 
} 
configure(loadStories, module) 
从 库 中 导入 配置 函数 ， 然 后 定义 另 一 个 函数 按照 每 条 故事 文档 的 路 径 加 载 它们 。 
接着 将 该 限 数 传 给 配置 函数 。 至 此 ， 一切 就 绪 了 。 


最 后 需要 创建 npm 任务 , 触发 Storybook 的 可 执行 命令 来 运行 它 ， 然 后 在 浏览 器 中 查看 风格 
指南 。 
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具体 做 法 如 下 所 示 : 

"storybook": "start-storybook -p 9001" 
将 这 条 命令 写 在 package.json 的 脚本 部 分 。 

现在 只 需要 运行 : 

npm run storybook 


并 在 浏览 器 中 打开 http:/localhost:9001。 
页 面 左 侧 的 故事 文档 列表 可 以 访问 Storybook 的 接口 。 
点 击 任何 一 条 故事 文档 ， 就 能 在 右 侧 看 到 对 应 的 组 件 被 泻 染 。 
非常 好 , 现在 我 们 有 了 一 套 能 为 所 有 组 件 状态 提供 文档 的 可 用 风格 指南 , 更 易 与 设计 师 及 产 


品 经 理 共享 信息 。 
最 后 再 来 创建 第 二 条 故事 文档 。 
列表 可 以 显示 各 项 的 标题 和 文本 ， 因 此 在 消息 集合 中 加 入 第 二 个 属 


























调 
济 





const posts = [ 
{ 
I 
title: 'Create Apps with No Configuration', 
excerpt: 'Create React App is a new officially supported...', 


1 2 
title: 'Mixins Considered Harmful', 
excerpt: '"How do I share the code between several...', 


} ， 
] 


将 以 下 代码 段 编写 的 文档 添加 到 刚刚 那 条 文档 后 面 ; 

bist corleetion- (posrs) eh 

现在 回 到 浏览 器 ， 页 面 会 自动 刷新 ， 接 着 就 可 以 在 左 侧 边 栏 中 看 到 两 条 故事 文档 。 

点 击 不 同 的 文档 ， 右 侧 的 组 件 就 会 更 新 。 

选择 第 一 条 文档 ,就 可 以 看 到 只 带 有 标题 的 列表 ; 选择 第 二 条 ， 就 会 看 到 既 有 标题 又 有 摘要 
的 列表 。 


对 于 更 复杂 的 组 件 ， 可 以 添加 多 条 故事 文档 ， 并 显示 每 个 组 件 可 能 具有 的 所 有 状态 与 变 体 。 
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3.6 小 结 
学 习 如 何 编写 可 复 用 组 件 的 旅程 就 要 结束 了 。 


我 们 一 开始 深入 学 习 了 基础 知识 ， 了 解 了 有 状态 与 无 状态 组 件 的 差别 , 也 研究 了 如 何 将 紧密 
耦合 的 组 件 改 成 可 复 用 的 。 接 着 我 们 学 习 了 组 件 的 内 部 状态 ， 以 及 何 时 应 该 避免 使 用 它 。 此 外 ， 
我 们 还 学 习 了 prop 类 型 的 基础 知识 ， 并 将 这 些 概念 应 用 到 我 们 编写 的 可 复 用 组 件 中 。 


最 后 , 我 们 探讨 了 可 用 的 风格 指南 如 何 帮助 我 们 更 好 地 与 团队 其 他 成 员 沟 通 , 避免 重复 创建 
组 件 ， 并 确保 应 用 内 的 一 致 性 。 


接 下 来 我 们 将 学 习 组 合 组 件 时 所 能 用 到 的 各 种 技巧 。 
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我 们 在 上 一 音 中 探讨 了 如 何 创建 接口 清晰 的 可 复 用 组 件 , 现在 是 时 候 学 习 如 何 让 组 件 彼此 高 4 
效 通 信 了 。 


React 非常 强大 ， 因 为 它 允 许 你 组 合 可 测试 且 可 复 用 的 小 型 组 件 来 构建 复杂 的 应 用 。 你 可 以 
采用 这 种 方式 来 控制 应 用 的 每 一 个 单独 部 分 。 


本 章 将 介绍 一 些 最 流行 的 组 合 模式 与 工具 。 
本 章 包含 如 下 内 容 。 


口 组 件 间 如 何 通过 props 以 及 childqren 进行 通信 。 

口 容器 组 件 与 表现 组 件 模 式 ， 以 及 该 模式 如 何 使 得 代码 更 易 维 护 。 
口 mixin 试图 解决 的 问题 以 及 其 失败 的 原因 。 

口 什么 是 高 阶 组 件 ， 以 及 如 何 用 它 更 好 地 架构 应 用 。 

口 recompose 库 及 其 开 箱 即 用 的 函数 。 

口 如 何 与 上 下 文 交互 ， 并 避免 组 件 与 它 耦合 。 

口 什么 是 函数 子 组 件 模 式 ， 它 有 什么 优势 。 











Ey 




















4.1 组 件 间 的 通信 


复 用 琐 数 是 我 们 作为 开发 者 的 目标 之 一 ， 而 且 我 们 也 见识 到 了 React 可 以 很 方便 地 创建 可 复 
用 组 件 。 


可 以 在 应 用 的 多 个 部 分 共享 可 复 用 组 件 ， 从 而 避免 重复 宛 余 。 
接口 清晰 的 小 型 组 件 可 以 组 合 出 复杂 的 应 用 ， 同 时 又 能 确保 应 用 的 强大 和 可 维护 性 。 
React 组 件 的 组 合 方式 相当 直观 ， 将 它们 放 入 render 方法 即 可 ; 




















const Profile = ({ user }) => ( 
<div> 
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<Picture profileImageUrl={user.profileImageUrl} /> 
<UserName name={user.name} screenName={user.screenName} /> 
</div> 


) 
Profile.propTypes = { 
user: React.PropTypes.object, 


} 


如 上 所 示 , Picture 组 件 用 于 显示 个 人 资料 照片 , UserName 组 件 用 于 显示 用 户 名 及 屏幕 昵 
你 ， 简 单 地 组 合 两 者 就 能 创建 Profile 组 件 。 


通过 这 种 方式 ， 只 需要 编写 几 行 代码 就 可 以 很 快 生成 UI 新 的 部 分 。 
正如 以 上 示例 所 示 ， 创 建 组 件 时 会 通过 props 在 它们 之 间 共 享 数 据 。 


父 组 件 通 过 props 将 数据 向 下 传递 ， 组 件 树 中 的 每 个 组 件 都 能 接受 这 份 数据 (或 者 其 中 一 
部 分 )。 


当 一 个 组 件 向 另 一 个 组 件 传 递 某 些 props 时 ， 不 论 两 者 间 是 否 存在 父子 关系 ， 传 出 组 件 称 为 
拥有 者 。 


以 前 面 的 代码 段 为 例 , Profile 不 是 Picture 的 直接 父 组 件 ( aiv 标签 才 是 ), 但 Profile 
拥有 Picture， 因 为 前 者 向 后 者 传递 了 props。 





























children 

















children 是 一 个 特殊 的 prop， 拥 有 者 组 件 可 以 将 它 传递 给 泻 染 方法 内 定义 的 组 件 。 
React 文 档 将 cnildren 属性 描述 为 不 透明 的 ， 因 为 它 没 有 对 所 包含 的 值 提 供 任 何 说 明 。 


父 组 件 的 泻 染 方 法 中 定义 的 子 组 件 通常 接收 props 作为 自身 的 JSX 属性 ， 或 者 作为 
createElement 图 数 的 第 二 个 参数 。 

















定义 组 件 时 也 可 以 包含 内 部 的 能 套 组件 ， 可 以 用 chilgren 属性 访问 这 些 子 组 件 。 
查看 以 下 的 Button 组 件 ， 其 文本 属性 表示 按钮 的 文本 : 
const. Button es, (tt text; }) =>-( 


<button className="btn">{text}</button> 
) 











Button.propTypes = { 
text: React.PropTypes.string, 
} 


可 以 按 以 下 方式 使 用 该 组 件 : 
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<Button text="Click me!" /> 
泻 染 的 代码 如 下 所 示 : 
<button class="btn">Click me!</button> 


现在 , 假设 我 们 想 要 在 应 用 的 多 个 部 分 使 用 类 名 一 样 的 相同 按钮 , 并且 我 们 不 只 是 想 要 显示 
单个 简单 字符 串 。 


实际 的 UI 包含 各 种 按钮 ， 如 文本 按钮 、 文 本 图 标 按钮 及 文本 标签 按钮 。 




















大 部 分 情况 下 ， 较 好 的 做 法 是 为 Button 组 件 添加 多 个 参数 ， 或 者 创建 不 同 版 本 的 Button 
组 件 ， 每 个 版 本 具有 自己 独立 的 特性 ， 如 IconButton 组 件 。 


然而 ， 如 果 只 将 Button 组 件 看 作 一 个 封装 器 ， 并 想 要 在 其 内 部 泻 染 任何 元 素 ， 此 时 可 以 使 
用 chilgren 属性 。 

















这 个 目的 很 容易 实现 ， 只 要 将 原先 的 Button 组 件 改 成 类 似 以 下 的 代码 段 即 可 : 


const Button = ({ children }) => (人 
<button className="btn">{children}</button> 


) 


Button.propTypes = { 
children: React.PropTypes.array, 


} 


修改 完成 后 ，Button 组 件 就 不 再 局 限于 简单 的 单个 文本 属性 了 ， 现 在 我 们 可 以 将 任何 元 素 
传递 给 它 ， 然 后 在 childaren 属性 的 位 置 上 泻 染 出 来 。 




















在 以 上 示例 中 ，Button 组 件 内 部 封装 的 任何 元 素 都 会 泻 染 成 类 为 ptn 的 按钮 元 素 的 子 





举例 来 说 ， 如 果 我 们 想 要 在 按钮 内 泻 染 一 张 图 片 和 一 个 span 元 素 包 囊 的 文本 ， 可 以 参考 以 
下 代码 段 : 


<Button> 
<imMo SECS Les. A 
<span>Click me!</span> 
</Button> 


以 上 代码 段 在 浏览 器 中 渲染 的 结果 如 下 所 示 : 
<button className="btn"> 
i I P= es = i A 
<span>Click me!</span> 
</button> 


这 种 便捷 方式 允许 组 件 接收 任何 chilaren 元 素 ， 并 将 它们 封装 在 预先 定义 好 的 父 组 件 中 。 
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现在 可 以 为 Button 组 件 传递 图 片 、 标 签 甚至 其 他 React 组 件 了 ， 它 们 会 被 泻 染 为 Button 
的 子 元 素 。 








在 以 上 示例 中 , 我 们 将 chilaren 属性 定义 为 数组 , 这 意味 着 可 以 传人 任何 数量 的 元 素 作为 
该 组 件 的 子 元 素 。 


可 以 传人 单个 子 元 素 ， 如 下 所 示 : 





<Button> 
<span>Click me!</span> 
</Button> 


传人 单个 元 素 时 会 看 到 以 下 提示 : 


Failed prop type: Invalid prop ‘children. of type ‘object. supplied 
to ‘Button’, expected ‘array '. 


这 是 因为 组 件 只 有 单个 子 元 素 时 ， 出 于 性 能 方面 的 考虑 ，React 会 优化 元 素 的 创建 过 程 ， 避 
人 免 分 配 数 组 。 


坚决 这 个 警告 提示 很 简单 ， 设 置 chi1laren 接受 以 下 prop 类 型 即 可 : 





























Button.propTypes = { 
children: React.PropTypes.oneOofTypell[ 
React .PropTypes .array, 
React .PropTypes.element, 
sy 
} 


4.2 容器 组 件 与 表现 组 件 模式 


第 3 章 介绍 了 如 何 逐 步 将 耦合 的 组 件 改 为 可 复 用 组 件 。 本 节 将 探讨 如 何 为 组 件 应 用 一 种 类 似 
的 模式 ， 以 便 它们 更 清晰 ， 更易 维 护 。 

React 组 件 通常 包含 杂 合 在 一 起 的 逻辑 与 表现 。 逻 辑 一般 指 与 UI 无 关 的 那些 东西 ， 如 API 
的 调用 、 数 据 操作 以 及 事件 处 理 器 。 表 现 则 是 指 泻 染 方法 中 创建 元 素 用 来 显示 UI 的 部 分 。 

React 有 一 种 简洁 而 强大 的 模式 ， 称 为 容器 组 件 与 表现 组 件 ， 按 照 这 种 模式 创建 组 件 可 以 帮 
助 我 们 分 离 上 述 两 个 关注 点 。 

清晰 地 定义 逻辑 与 表现 间 的 界限 不 仅 能 使 组 件 更 易 复 用 ， 还 有 很 多 其 他 好 处 ， 本 节 将 一 一 
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了 次 强调 ， 学 习 新 概念 的 最 佳 方式 之 一 就 是 查看 实际 示例 ， 因 此 我 们 来 研究 一 些 代 码 。 
假设 我 们 有 一 个 组 件 利用 地 理 位 置 API 获取 用 户 定 位 ， 并 在 浏览 如 页 面 上 显示 经 纬 











三 
之 o 








dt 
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首先 ， 在 组 件 文 件 夹 下 创建 geolocation.js 文件 ， 并 用 class 定义 Geolocation 组 件 : 
class Geolocation extends React .Component 


接着 定义 constructor 方法 ， 用 于 初始 化 内 部 状态 并 绑 定 事件 处 理 需 : 


constructor(props) { 
super (props) 


this.state = { 
latitude: null, 
longitude: null, 
} 


this.handleSuccess = this.handleSuccess.bind (this) 


} 
现在 可 以 用 componentDigdMount 回调 触发 API 请 求 了 : 





componentDidMount () { 
if (navigator.geolocation) { 
navigator.geolocation.getCurrentPosition(this.handleSuccess) 
lj 
} 


当 浏 览 器 返回 数据 时 ， 使 用 以 下 函数 将 结果 保存 在 状态 中 : 


handleSuccess({ coords }) { 
this.setState({ 
latitude: coords.latitude, 
longitude: coords.longitude, 
} 
} 


最 后 用 render 方法 显示 经 纬度 : 


render() { 
return ( 
SL 
<div>Latitude: {this.state.latitude}</div> 
<div>Longitude: {this.state.longitude}</div> 
</div> 





} 


值得 一 提 的 是 ， 首 次 泻 染 时 经 纬度 的 数据 都 是 nul1， 因 为 我 们 在 组 件 挂 载 后 才 向 浏览 器 
求 坐标 。 在 现实 的 组 件 中 ,可 能 会 想 要 在 数据 返回 前 显示 一 个 旋转 动画 。 要 实现 这 一 需求 ,6 可 以 
使 用 第 2 章 中 学 到 的 某 个 条 件 语句 技巧 。 


现在 这 个 组 件 没有 任何 问题 了 ， 可 以 按 预 期 工作 。 
假设 现在 你 正和 设计 师 一 起 探讨 组 件 的 UI 部 分 ， 即 向 用 户 展示 经 纬度 信息 的 地 方 。 
































妹 
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为 了 更 快 地 迭代 ， 将 UI 与 请 求 并 加 载 位 置信 息 的 部 分 分 开会 不 会 更 好 ? 


抽 离 主 组 件 的 表现 部 分 , 可 以 使 用 Storybook 在 风格 指南 中 用 伪 数 据 演 染 组 件 , 像 上 一 章 那 
样 ， 这 样 就 能 享受 到 开发 可 复 用 组 件 带 来 的 所 有 好 处 。 


那么 我 们 来 看 看 如 何 通 过 遵循 容 右 组 件 与 表现 组 件 模 式 来 实现 这 个 目的 。 
在 这 个 模式 中 ， 每 个 组 件 都 拆 分 成 两 个 小 组 件 ， 每 个 小 组 件 各 自 都 有 清晰 的 职责 。 

















容 需 组 件 包含 有 关 组 件 逻 辑 的 一 切 ， 
数据 操作 以 及 事件 处 理 。 

















API 的 调用 就 在 容器 组 件 中 进行 。 此 外 ， 它 还 负责 处 理 


UI 定 义 在 表现 组 件 中 ， 并 且 表 现 组 件 以 prop 的 形式 从 容 需 组 件 接收 数据 。 

为 表现 组 件 通常 不 含 逻 辑 ， 所 以 可 以 将 它 创 建 为 函数 式 无 状态 组 件 。 

没有 规则 要 求 表 现 组 件 一 定 不 能 拥有 状态 。 例 如 ，UI 状 态 就 可 以 保存 在 表现 组 件 内 部 。 
这 个 示例 只 需要 一 个 用 于 显示 经 纬度 的 组 件 ， 因 此 用 一 个 简单 函数 来 实现 即 可 。 











首先 ,将 Geolocation 组 件 重 命名 为 GeolocationContainer: 


Class GeolocationContainer extends React .Component 


同时 将 geolocation.js 文件 重 命名 为 geolocation-containerjs。 


在 容器 组 件 名 的 末尾 加 上 container， 
React 社 区 广泛 使 用 的 最 佳 实践 。 














而 表现 组 件 则 采用 原 有 和 名称， 这 项 规则 并 不 严格 , 却 是 


另外 还 需要 更 改 泻 染 方法 的 实现 ， 并 移 除 所 有 UI 部 分 ， 如 下 所 示 : 


render() { 
return ( 
<Geolocation {...this.state} 
) 

} 


/> 











如 以 上 代码 段 所 示 ， 我 们 不 在 容 需 组 件 的 泻 染 方法 内 创建 HTML 元 素 ， 而 是 使 用 ( 接 下 来 





将 会 创建 的 ) 表现 组 件 ， 并 传人 状态 。 
状态 包含 经 纬度 属性 ， 默 认 值 为 nu 
值 给 它们 。 
这 里 用 到 了 第 2 章 中 介绍 的 扩展 属 恨 
手动 逐个 书写 prop。 











4 





11， 浏 览 絮 触发 回调 函数 后 会 将 真正 的 用 户 位 置信 息 赋 





操作 符 。 这 种 方式 可 以 很 方便 地 传人 状态 的 属性 , 无 须 








现在 我 们 创建 一 个 名 为 geolocationjs 的 新 文件 , 在 该 文件 中 定义 无 状态 函数 式 组 件 , 如 下 所 示 : 
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const Geolocation = ({ latitude, longitude }) => ( 
<div> 
<div>Latitude: {latitude}</div> 
<div>Longitude: {longitude}</div> 
</div> 


) 
无 状态 函数 式 组 件 就 是 纯粹 函数 ， 传 人 状态 并 返回 元 素 ， 可 以 非常 优雅 地 定义 UI。 














在 这 个 示例 中 ， 函 数 从 拥有 者 组 件 那 接收 经 纬度 数据 ， 然 后 返回 标记 结构 来 显示 出 来 。 





我 们 当然 希望 能 遵循 最 佳 实践 ， 为 组 件 定 义 清晰 的 接口 ， 因 此 用 propTypes 来 声明 组 件 所 


需要 的 属性 : 
Geolocation.propTypes = { | 


latitude: React.PropTypes.number, 
longitude: React.PropTypes.number, 
} 


如 果 在 浏览 器 中 运行 组 件 代 码 ， 那 么 可 以 看 到 如 下 图 所 示 的 内 容 : 











@ @ React App 


二 CE，gQ@ localhost:300( 


姥 


Welcome to React 





Latitude: 37.4530 
Longitude: -122.1817 











通过 遵循 容器 组 件 与 表现 组 件 模式 ， 我 们 创建 了 一 个 不 含 数据 获取 逻辑 "的 可 复 用 组 件 ， 可 
以 将 该 组 件 放 和 人 风格 指南 ， 并 传人 模拟 的 坐标 数据 。 














g 原文 为 umb， 中 文 表示 哑 ， 此 处 表示 组 件 不 能 获取 数据 。 一 一 译 者 注 
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如 果 应 用 的 其 他 部 分 需要 显示 同样 的 数据 结构 , 不 必 创 建新 的 组 件 ; 只 要 将 现 有 组 件 封装 进 
新 的 容 需 组 件 即 可 ， 这 个 新 容 需 会 从 不 同 的 API 路径 加 载 经 纬度 数据 。 














与 此 同时 , 团队 的 其 他 成 员 可 以 添加 错误 处 理 逻 辑 来 改进 这 个 地 理 位 置 容器 组 件 ， 而 且 不 会 
影响 表现 组 件 。 











其 他 人 甚至 可 以 临时 开发 一 个 表现 组 件 ， 只 用 于 显示 与 调试 数据 ， 当 数据 准备 就 绪 时 再 替换 
真正 的 表现 组 件 。 











能 够 并 行 开发 同一 个 组 件 对 于 整个 团队 来 说 收益 很 大 ， 尤 其 是 那些 迭代 开发 接口 的 公司 。 
这 个 模式 简单 却 又 非常 强大 , 在 大 型 应 用 中 使 用 它 可 以 为 开发 速度 及 项 目 可 维护 性 带 来 巨大 


国人 
宗 乡 啊 o 














男 一 方面 , 如 非 真 正 需 要 却 使 用 了 这 种 模式 会 带 来 反面 问题 , 代码 库 需 要 创建 更 多 文件 及 组 
件 ， 进 而 导致 可 用 程度 降低 。 


因此 ， 当 决定 按照 容器 组 件 与 表现 组 件 模式 进行 重 构 时 ， 应 当 仔 细 思 考 一 番 。 























总 的 来 说 , 遵循 该 模式 的 正确 途径 是 从 单个 组 件 着 手 , 并 且 只 在 逻辑 与 表现 过 于 紧密 耦合 时 
进行 拆 分 。 


拿 以 上 示例 来 说 ， 先 从 单个 组 件 开 始 ， 后 来 我 们 才 意 识 到 可 以 从 标记 中 分 离 API 调 用 逻辑 。 























判断 容器 组 件 和 表现 组 件 分 别 要 包含 哪些 内 容 往往 不 大 直观; 以 下 几 点 建议 可 以 帮 你 做 出 
判断 。 


容器 组 件 : 


口 更 关心 行为 部 分 ; 

口 负责 泻 染 对 应 的 表现 组 件 ; 
口 发 起 API 请 求 并 操作 数据 ; 
口 定义 事件 处 理 器 ; 

口 写作 类 的 形式 。 

表现 组 件 : 
口 更 关心 视觉 表现 ; 

口 负责 泻 染 HTML 标记 (或 其 他 组 件 ); 


口 以 props 的 形式 从 父 组 件 接 收 数据 ; 
口 通常 写作 无 状态 函数 式 组 件 。 
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4.3 mixin 











组 件 对 于 实现 可 复 用 性 意义 重大 ， 但 不 同 场景 下 的 不 同 组 件 拥有 相同 行为 时 怎么 办 ? 
我 们 不 希望 在 应 用 中 复制 代码 ， 当 需要 在 不 同 组 件 间 共享 功能 时 ， 可 以 使 用 React 提供 的 一 


个 工具 : mixin。 





























现在 已 经 不 再 推荐 使 用 mixin 了 ,不 过 理解 这 项 技术 尝试 解决 的 问题 还 是 很 有 意义 的 ,顺便 
了 解 一 下 有 哪些 可 能 的 替代 方案 。 


另外 , 你 可 能 需要 维护 旧版 React 开发 的 遗留 项 目 , 此 时 了 解 mixin 及 其 用 法 就 很 有 意义 了 。 








首先 ，mixin 只 能 和 createclass 工厂 方法 搭配 使 用 ， 因 此 ， 如 果 你 用 的 是 类 ， 那 么 就 不 
能 使 用 mixin， 这 也 正 是 不 推荐 使 用 它们 的 原因 之 一 。 


假设 在 应 用 中 使 用 了 createclass 方法 ， 你 会 发 现 需要 在 不 同 组 件 内 编写 相同 的 代码 。 
举例 来 说 ， 你 需要 监听 window 的 resize 事件 来 获取 窗口 大 小 ， 并 执行 相应 操作 。 





























mixin 的 一 种 用 法 是 一 次 编写 ， 然 后 在 不 同 组 件 中 共享 。 我 们 来 探究 一 段 代 码 。 
mixin 可 以 定义 为 对 象 字 面 量 ， 和 组 件 拥 有 同样 的 方法 与 属性 : 
const WindowResize = {...} 




















mixin 通常 用 状态 与 组 件 进行 通信 。 通 过 getInitialstate 就 能 用 window 的 初始 
innerWigdtn 对 状态 进行 初始 化 : 


getInitialState() { 
return { 
innerWidth: window.innerWidth, 
} 
} 


现在 我 们 想 要 追踪 值 的 变化 。 因 此 ， 当 组 件 挂 载 时 ， 开 始 监听 window 的 resize 事件 : 





componentDidMount () { 

window.addEventListener('resize', this.handleResize) 
} 
我 们 还 想 在 组 件 完成 印 载 后 立马 移 除 事件 监听 吉 。 这 非常 关键 , 可 以 释放 内 存 , 避免 在 window 
上 留 下 无 用 的 监听 需 : 





componentWillUnmount() { 
window.removeEventListener('resize', this.handleResize) 


最 后 ， 定 义 每 次 触发 window resize 事件 时 的 回调 函数 。 
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实现 回调 函数 ， 以 便 根 据 新 的 innerwidth 值 来 更 新 状态 , 这 样 一 来 , 使 用 该 mixin 的 组 件 
就 会 用 新 的 值 重新 泻 染 自身 : 
handleResize() { 
this.setStatel(lt{ 
innerWidth: window.innerWidth, 


}) 
}, 


从 以 上 代码 段 可 以 看 出 ，mixin 的 创建 方式 和 组 件 很 像 。 
现在 ， 如 果 想 要 在 组 件 中 使 用 mixin， 只 需要 将 它 放 入 对 象 的 mixin 数组 属性 中 : 














const MyComponent = React.createClass({ 
mixins: [WindowResizel], 


render() { 
console.log('window.innerWidth', this.state.innerWidth) 


}, 
}) 


从 此 刻 起 , 可 以 在 组 件 的 状态 中 获取 window 的 innerwidthn 值 了 , 只 要 innerwidth 发 生 
变化 ， 组 件 就 会 用 更 新 后 的 值 进行 重新 泻 染 。 


可 以 同时 在 多 个 组 件 中 使 用 这 个 mixin， 也 可 以 在 一 个 组 件 中 使 用 多 个 mixin。 
mixin 具有 一 项 很 棒 的 特性 ， 这 个 特性 允许 它们 合并 生命 周期 方法 和 初始 状态 。 


举例 来 说 ， 如 果 在 某 个 组 件 中 使 用 了 windowResize mixin ， 同 时 该 组 件 也 定义 了 
componentDidMount 钧 子 ， 那 么 二 者 会 按 顺 序 执行 。 


使 用 相同 生命 周期 钧 子 的 多 个 mixin 同 理 。 


现在 我 们 来 了 解 一 下 mixin 存在 的 问题 ， 下 一 节 将 介绍 实现 相同 结果 的 最 佳 技巧 ， 同 时 还 能 
避免 一 切 问 题 。 


首先 ，mixin 有 时 利用 内 部 函数 与 组 件 进行 通信 。 


例如 ，windowResize 这 个 mixin 可 能 希望 组 件 实现 nandleResize 函数 ， 并 在 窗口 尺寸 
变化 时 允许 开发 者 自由 地 执行 某 些 操 作 ， 而 不 是 用 状态 来 触发 更 新 。 或 者 ， 相 较 于 在 状态 中 设置 
新 值 ，mixin 可 能 需要 组 件 调 用 一 个 函数 ( 如 示例 中 的 getInnerwidth ) 来 获取 实际 值 。 


问题 是 ， 我 们 无 法 得 知 需要 实现 哪些 方法 。 
这 对 于 可 维护 性 来 说 尤为 糟糕 ， 因 为 如 果 使 用 了 多 个 mixin， 那 么 组 件 最 终 需 要 实现 不 同 的 
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方法 ， 当 移 除 某 些 mixin 或 者 行为 发 生 改 变 时 ， 很 难 消除 废弃 代码 。 

mixin 的 另 一 个 常见 问题 是 冲突 。 实 际 上 ， 虽 然 React 确实 可 以 聪明 地 合并 生命 周期 回调 ， 
但 如 果 两 个 mixin 定义 或 调用 了 同样 的 函数 名 ， 抑 或 在 状态 中 使 用 了 相同 的 属性 ， 那 么 React 对 
此 无 能 为 力 。 

这 种 情况 对 大 型 代码 库 来 说 非常 糟糕 ,因为 这 会 带 来 无 法 预料 的 行为 , 并 且 增 加 了 调试 问题 
的 难度 。 

正如 我 们 在 windowResize 示例 中 所 见 ，mixin 往往 需要 用 状态 与 组 件 进行 通信 。 因 此 ， 如 
果 mixin 在 组 件 状 态 中 更 新 了 一 个 特殊 属性 ， 那 么 组 件 就 会 因为 这 个 新 属性 重新 进行 泻 染 。 

这 会 导致 组 件 包含 不 必要 的 状态 , 这 种 做 法 并 不 好 ， 因 为 我 们 已 经 知道 , 为 了 提升 可 复 用 性 
与 可 维护 性 ， 应 该 极力 避免 这 样 做 。 

最 后 ， 有 时 会 出 现 mixin 互相 依赖 的 情况 。 例 如 ， 我 们 可 以 创建 ResponsiveMixin， 它 会 根 
据 窗 口 大 小 改变 某 些 组 件 的 可 见 度 ， 而 WindowResize mixin 刚好 提供 了 窗口 大 小 值 。 


mixin 间 的 这 种 耦合 导致 组 件 重 构 和 应 用 扩展 变 得 非常 困难 。 









































4.4 高 阶 组件 
4.3 节 介 绍 了 mixin 在 组 件 间 共享 功能 方面 的 用 处 及 其 带 来 的 问题 。 


第 2 章 介绍 函数 式 编程 时 ， 我 们 提 到 了 高 阶 函 数 的 概念 ， 这 类 函数 对 传人 的 函数 进行 增强 ， 
并 返回 一 个 添加 了 额外 行为 的 新 函数 。 


我 们 来 看 看 能 否 在 React 组 件 上 应 用 相同 概念 ， 借 此 实现 组 件 间 共享 功能 ， 并 避 开 mixin 的 
缺点 0 


当 高 阶 函数 概念 应 用 在 组 件 上 时 ， 我 们 将 它 简 称 为 高 阶 组 件 。 
首先 我 们 来 看 看 高 阶 组 件 长 什么 样 : 

const HoC = Component => EnhancedComponent 

高 阶 组 件 其 实 就 是 函数 ， 它 接收 组 件 作 为 参数 ， 对 组 件 进行 增强 后 返回 。 
我 们 通过 一 个 很 简单 的 示例 来 理解 增强 后 的 组 件 长 什么 样 。 


假设 出 于 某 些 原因 ， 你 需要 为 每 个 组 件 添加 相同 的 className 属性 。 可 以 选择 在 全 部 的 演 
染 方法 中 为 每 个 组 件 加 上 className prop， 也 可 以 参考 以 下 示例 编写 一 个 高 阶 组 件 : 
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const withClassName = Component => props => ( 
<Component {...props} className="my-class" /> 
) 


一 开始 理解 以 上 代码 会 有 些 困难 ， 我 们 试 着 理解 一 番 。 
我 们 声明 了 接受 Component 参数 的 withCclassName 国 数 ， 然 后 返回 另 一 个 函数 。 


返回 的 函数 是 一 个 无 状态 函数 式 组件 ， 它 接受 props 参数 并 泻 染 原 来 的 组 件 。 整 个 props 对 
象 会 展开 ， 然 后 和 值 为 "my-class" 的 className 属性 一 起 传 给 组 件 。 


高 阶 组件 通 常 将 组 件 上 接收 到 的 props 对 象 展开 ， 这 样 做 的 原因 是 尽量 让 它们 更 直观 ， 并 且 
只 添加 新 的 行为 。 


这 个 示例 相当 简单 , 用 处 也 不 是 很 大 , 但 它 可 以 让 你 更 好 地 理解 高 阶 组 件 的 定义 以 及 它们 的 
样子 。 


现在 我 们 来 看 看 如 何在 组 件 中 使 用 withclassName 高 阶 组 件 。 
首先 ， 创 建 一 个 无 状态 函数 式 组 件 ， 它 接收 类 名 称 并 赋值 给 一 个 div 标签 : 












































const MyComponent = ({ className }) => ( 
<div className={className} /> 
) 
MyComponent .propTypes = { 
className: React.PropTypes.string, 
} 
我 们 不 直接 使 用 它 ， 而 是 传递 给 高 阶 组 件 ， 如 下 所 示 : 
const MyComponentWithClassName = withClassName (MyComponent) 
通过 将 组 件 封 装 进 withclassName 也 数 ,确保 该 组 件 可 以 接收 className 属性 。 
接 下 来 我 们 将 做 一 些 更 令 人 激动 的 事情 ， 试 着 将 4.3 节 中 提 到 的 windowResize mixin 转换 
为 高 阶 组 件 函 数 ， 以 便 整 个 应 用 都 能 复 用 。 
mixin 的 原理 很 简单 ， 它 监听 window 的 resize 事件 , 将 window 的 innerwiath 属性 更 新 到 
该 mixin 的 最 大 问题 其 实 是 利用 组 件 状态 来 提供 innerwiath 值 。 
这 种 做 法 不 好 的 原因 是 , 它 用 外 来 属性 污染 了 状态 , 这 些 属性 可 能 会 与 组 件 自身 用 到 的 属性 
发 生 冲 突 。 
首先 ， 创 建 接受 组 件 作为 参数 的 函数 : 
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const withIinnerWidth = Component => ( 
class extends React.Component { ... } 


) 


你 可 能 已 经 注意 到 了 高 阶 组 件 的 命名 方式 。 这 种 做 法 很 常见 , 就 是 给 为 组 件 提 供 信息 的 高 阶 
组 件 名 称 加 上 with 前 级 








withInnerWidth 函数 将 返回 组 件 类 而 不 是 无 状态 函数 式 组 件 , 如 上 述 示 例 所 示 , 我 们 需要 
额外 的 函数 与 状态 。 


我 们 来 看 一 下 返回 了 什么 样 的 类 
构造 器 中 定义 了 初始 状态 ， 并 且 nandleResize 回调 函数 绑 定 了 当前 类 。 





constructor(props) { 
super (props) 


this.state = { 
innerWidth: window.innerWidth, 


} 


this.handleResize = this.handleResize.bind(this) 





命 周期 钧 子 和 事件 处 理 器 与 mixin 的 完全 一 样 : 


componentDidMount () { 
window.addEventListener('resize', this.handleResize) 


} 


componentWillUnmount() { 
window.removeEventListener('resize', this.handleResize) 


} 


handleResize() { 
this.setState({ 
innerWidth: window.innerWidth, 
} 
} 


最 后 ， 原 先 的 组 件 按 以 下 方式 来 泻 染 


render() { 
return <Component {...this.props} {...this.state} /> 


} 
你 可 能 注意 到 了 ， 此 处 和 之 前 一 样 展 开 了 props， 同 时 也 展开 了 状态 。 


实际 上 ， 我 们 将 innerwiath 值 保存 在 (高 阶 组 件 的 ) 状态 中 来 实现 最 初 的 行为 ， 同 时 改 
用 props， 不 污染 原先 组 件 的 状态 。 
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我 们 在 第 3 章 中 介绍 了 使 用 props 能 始终 很 好 地 确保 可 复 用 性 。 








现在 ， 高 阶 组 件 的 使 用 以 及 innerwidtn 值 的 获取 都 非常 直观 了 。 
创建 一 个 无 状态 函数 式 组件 ， 并 期 望 传人 innerwidth 属性 : 


const MyComponent = ({ innerWidqth }) => { 
console.log('window.innerWidth', innerWidth) 

















} 
MyComponent .propTypes = { 
innerWidth: React.PropTypes.number, 
} 
然后 用 以 下 代码 增强 该 组 件 : 


const MyComponentWithIinnerWidth = withIinnerWwidth (MyComponent) 


这 比 用 mixin 具有 很 多 优势 : 首先 没有 污染 任何 状态 ， 其 次 不 需要 组 件 来 实现 任何 方法 。 





























这 意味 着 组 件 和 高 阶 组 件 没 有 耦合 ， 可 以 在 整个 应 用 中 复 用 它们 。 





再 次 强调 ， 用 props 代替 状态 能 分 离 组 件 与 逻辑 ， 这 样 一 来 ,我 们 就 可 以 在 风格 指南 中 使 用 
组 件 ， 忽 略 任何 复杂 逻辑 ， 只 传人 props 即 可 。 


在 这 种 特殊 情况 下 ， 可 以 为 支持 的 各 种 innerwiath 尺寸 分 别 创建 一 个 组 件 。 
思考 以 下 示例 : 


<MyComponent innerWidth={320} /> 


以 及 : 

















<MyComponent innerWidth={960} /> 


4.5 recompose 


一 旦 熟悉 高 阶 组 件 ， 就 会 意识 到 它们 的 强大 之 处 ， 并 和 希望 能 够 对 其 加 以 充分 利用 。 








recompose 是 一 个 很 流行 的 库 ， 提 供 了 许多 有 用 的 高 阶 组 件 ， 而 且 可 以 优雅 地 组 合 它们 。 





该 库 提 供 的 高 阶 组 件 就 是 一 些 用 于 封装 组 件 的 小 工具 , 可 以 从 组 件 中 抽 离 部 分 逻辑 , 使 它们 
更 简洁 、 可 复 用 性 更 好 。 











假设 组 件 从 某 个 API 接收 一 个 用 户 对 象 ， 且 该 对 象 包含 很 多 属性 。 








允许 组 件 接收 任何 对 象 的 做 法 不 太 好 ， 因 为 这 依赖 于 组 件 了 解 对 象 长 什么 样 ， 最 重要 的 是 ， 
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一 旦 对 象 发 后 改变 ， 组 件 就 会 月 省。 
从 父 组 件 接 收 props 的 更 好 方式 是 将 每 个 属性 定义 为 基本 类 型 。 
我 们 用 Profile 组 件 来 显示 username 和 age， 如 下 所 示 : 


























const Profile = ({ user }) => ( 
<div> 
<div>Username: {user.username}</div> 
<div>Age: {user.age}</div> 
</div> 


) 
Profile.propTypes = { 
user: React.PropTypes.object, 

} 

如 果 想 要 改变 组 件 接口 来 接收 单个 prop 而 不 是 整个 用 户 对 象 , 可 以 用 recompose 提供 的 高 
阶 组 件 flattenProp 来 实现 。 

我 们 来 看 一 下 具体 做 法 。 

首先 ， 修 改组 件 来 单独 声明 每 个 属性 ， 如 下 所 示 : 


const Profile = ({ username, age }) => ( 
<div> 

















<div>Username: {username}</div> 
<div>Age: {age}</div> 
</div> 


) 


Profile.propTypes = { 
username: React.PropTypes.string, 
age: React .PropTypes .number， 


} 
然后 用 高 阶 组 件 进行 增强 .: 
const ProfilewWithFlattenUser = flattenprop('user') (Profile) 


你 可 能 已 经 注意 到 了 ， 此 处 高 阶 组 件 的 用 法 稍 有 不 同 。 实 际 上 ， 这 是 一 种 函数 式 编程 方式 ， 
有 些 高 阶 组 件 先 通 过 偏 函 数 用 法 接收 参数 。 


它们 的 特征 如 下 所 示 : 




















const HoC = args => Component => EnhancedComponent 
我 们 要 做 的 就 是 先 调用 高 阶 组 件 来 创建 一 个 函数 ， 然 后 用 它 封 装 原 有 组 件 : 


const withFlattenUser = flattenprop('user') 
const ProfilewWwithFlattenUser = withFlattenUser (Profile) 








74 第 4 章 ”组 合 一 切 











非常 好 ! 现在 假设 出 于 某 些 原因 , 需要 改变 用 户 名 属性 , 以 便 组 件 更 加 通用 、 可 复 用 性 更 好 。 
这 种 情况 下 可 以 使 用 recompose 库 提 供 的 renameProp 并 更 新 组 件 ， 如 下 所 示 : 








const Profile = ({ name, age }) => ( 
<div> 
<div>Name: {name}</div> 
<div>Age: {age}</div> 
</div> 


) 
Profile.propTypes = { 
name: React.PropTypes.string, 
age: React.PropTypes.number, 
} 
现在 我 们 希望 同时 使 用 多 个 高 阶 组 件 ; 一 个 用 于 扁平 化 处 理 用 户 prop, 另 一 个 用 于 重 命名 用 
户 对 象 的 单个 prop ， 不 过 串联 使 用 函数 的 做 法 似乎 不 太 好 。 
此 时 recompose 库 提供 的 compose 函数 就 派 上 用 场 了 。 


实际 上 ， 可 以 将 多 个 高 阶 组 件 传 给 该 函数 ， 最 终 会 得 到 单个 增强 后 的 高 阶 组 件 : 




















const enhance = composel( 
flattenprop('user'), 
renameProp('username', 'name') 


) 
然后 按照 以 下 方式 将 它 应 用 于 原 有 组 件 : 

const EnhancedProfile = enhance (Profile) 
这 种 方式 显然 更 方便 、 优 雅 。 


有 了 recompose 库 后 ， 我 们 不 仅 可 以 使 用 它 提供 的 高 阶 组 件 ， 还 可 以 将 compose 函数 用 
在 我 们 自己 的 高 阶 组 件 上 ， 甚 至 结合 使 用 都 可 以 : 
































const _ enhance = composel( 
flattenprop('user'), 
renameProp('username', 'name'), 
withInnerWidth 

) 


如 你 所 见 ，compose 函数 非常 强大 ， 大 大 提升 了 代码 可 读 性 
可 以 串联 多 个 高 阶 组 件 以 尽量 保持 组 件 简洁 。 


非常 重要 的 另 一 点 是 ， 不 要 滥用 高 阶 组 件 ， 因 为 每 层 抽象 都 会 带 来 一 些 问题 。 拿 本 例 来 说 ， 
性 能 就 是 需要 权衡 的 地 方 。 





O 
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你 可 以 这 样 想 , 每 对 组 件 进行 一 层 高 阶 封装 ,就 是 在 添加 新 的 泻 染 函数 、 新 的 生命 周期 方法 
调用 以 及 内 存 分 配 。 


出 于 这 个 原因 ， 需 要 仔细 其 酌 何 时 应 该 使 用 高 阶 组 件 ， 以 及 何 时 重 构 架构 才 是 更 好 的 做 法 。 























context 
高 阶 组 件 可 以 很 方便 地 处 理 context。 


React 始终 提供 了 context 特性 ， 虽 然 关 于 它 的 文档 出 现 得 较 晚 ,但 许多 库 中 还 是 能 见 到 它 的 
应 用 。 


文档 依然 建议 谨慎 使 用 context， 因 为 它 仍 处 于 试验 阶段 ， 未 来 可 能 会 改变 。 


但 在 某 些 场景 下 ， 它 是 一 项 非常 强大 的 工具 ， 能 够 帮助 我 们 在 组 件 树 中 传递 数据 ， 无 须 用 
props 逐 级 传递 。 


要 想 利用 context 的 优势 ， 同 时 避免 其 API 与 组 件 产生 耦合 ， 可 以 使 用 高 阶 组 件 。 
高 阶 组 件 可 以 从 context 中 获取 数据 ， 转 换 成 props 后 再 传递 给 组 件 。 
在 这 种 方式 下 ， 组 件 不 知道 context 的 存在 ， 也 就 能 轻易 地 复 用 到 应 用 的 各 个 部 分 。 


男 一 方面 ， 如 果 context 的 API 未 来 发 生变 化 ， 应 用 中 唯一 需要 修改 的 部 分 就 是 高 阶 组 件 ， 
因为 组 件 本 身 与 它 解 厢 了 ， 这 能 带 来 很 大 益处 。 


recompose 库 提 供 了 一 个 函数 ， 使 得 context 的 使 用 变 得 简单 易 懂 ， 接 收 props 的 过 程 也 更 
加 直观 。 我 们 来 看 看 该 函数 的 工作 原理 。 


假设 你 有 一 个 用 来 显示 货币 单位 和 价值 的 Price 组 件 。 
context 的 最 广泛 用 法 就 是 将 通用 配置 从 根 节点 向 下 传递 到 叶 节点 ,货币 单位 就 是 这 些 配置 值 































































































之 一 o 
我 们 从 一 个 与 context 耦合 的 组 件 入 手 ， 用 高 阶 组 件 模 式 逐 步 将 它 改 写成 可 复 用 的 : 
const Price = ({ value }, { currency }) => ( 
<div>{currency}{value}</div> 


) 


Price.propTypes = { 
value: React.PropTypes.number, 


} 


Price.contextTypes = { 
currency: React.PropTypes.string, 


} 
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上 述 代码 中 的 无 状态 函数 式 组件 接 收 了 props 的 值 属性 , 是 context 的 货币 单位 属性 作为 第 二 
个 参数 


O 





我 们 同时 为 这 两 个 值 定 义 了 prop 类 型 与 context 类 型 。 


如 你 所 见 , 这 个 组 件 不 能 真正 地 复 用 , 因为 它 需 要 父 组 件 将 货币 单位 定义 为 子 组 件 的 context 
类 型 才能 工作 。 

举例 来 说 ， 我 们 不 能 简单 地 传人 模拟 的 货币 单位 属性 作为 prop， 然 后 在 风格 指南 中 使 用 。 

首先 ， 对 组 件 进 行 修改 ， 以 便 从 props 中 获取 两 个 值 : 

const Price = ({ currency, value }) => ( 


<div>{currency} {value}</div> 


) 











Price.propTypes = { 
currency: React.PropTypes.string, 
value: React .PropTypes .number， 


} 
当然 ， 不 能 直接 用 它 替 代 前 面 的 示例 ， 因 为 没有 父 组 件 为 它 设置 货币 单位 prop。 
我 们 要 将 它 封 装 进 高 阶 组 件 ， 然 后 将 context 上 接收 的 值 转换 成 props。 
可 以 用 recompose 库 提 供 的 getcontext 函数 ,也 可 以 简单 地 从 零 开 始 编写 一 层 自 定 义 封装 。 
这 里 要 再 次 用 到 偏 函数 写法 对 高 阶 组 件 进 行 特殊 化 处 理 ， 然 后 多 次 复 用 它 : 
const withCurrency = getContext({ 
currency: React.PropTypes.string 
}) 
接着 将 它 应 用 于 组 件 : 
const PriceWithCurrency = withCurrency (Price) 


现在 可 以 用 刚刚 完成 的 Price 组 件 蔡 换 旧 组 件 了 ， 它 仍然 可 以 正常 运行 ， 且 不 会 与 context 


这 种 做 法 大 有 神 益 ， 因 为 我 们 不 需要 修改 父 组 件 ， 还 可 以 利用 context 特性 且 无 须 担心 API 
未 来 会 发 生变 化 ， 而 且 Price 组 件 也 实现 了 可 复 用 性 。 


实际 上 ， 我 们 可 以 将 任意 的 货币 单位 和 值 传递 给 该 组 件 ， 不 需要 特定 父 组 件 提供 这 些 值 。 

































































4.6 ”函数 子 组 件 
React 社 区 目前 对 一 种 名 为 函数 子 组 件 的 模式 达成 了 共识 。 


4.6 函数 子 组 件 
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流行 库 react-motion 广泛 运用 了 该 模式 ， 第 6 章 将 详细 介绍 这 个 库 。 








这 种 模式 的 主要 概念 是 , 不 按 组 件 的 形式 传递 子 组 件 , 而 是 定义 一 个 可 以 从 父 组 件 接收 参数 
的 函数 。 


我 们 来 看 一 下 此 类 函数 长 什么 样子 : 
const FunctionAsChild = ({ children }) => children() 
FunctionAsChild.propTypes = { 


children: React.PropTypes.func.isRequired, 


} 


如 你 所 见 ，Functionaschild 组件 拥有 定义 为 函数 的 cnildqren 属性 ， 并 且 它 没有 按 JSX 
表达 式 的 形式 使 用 ， 而 是 作为 函数 被 调用 。 
































上 述 组 件 的 用 法 如 下 所 示 : 


<FunctionAsChild> 
{() => <div>Hello, World!</div>} 
</FunctionAsChild> 








原理 很 简单 : 父 组 件 的 泻 染 方法 触发 了 子 函数 ， 返 回 了 div 标签 包 于 的 Hello, World! 文 


， 最 后 显示 在 屏幕 上 。 





接着 我 们 来 探讨 一 个 更 有 实际 意义 的 示例 ， 其 中 父 组 件 传递 一 些 参数 给 chi ldren 函数 。 





创建 一 个 子 组 件 为 限 数 的 Name 组 件 ， 并 为 该 函数 传人 字符 串 Worla: 
const Name = ({ children }) => children('World') 
Name.propTypes = { 

children: React.PropTypes.func.isRequired, 
} 
上 述 组 件 的 用 法 如 下 所 示 : 
<Name> 


{name => <div>Hello, {name}!</div>} 
</Name> 


这 上段 代码 也 演 染 出 了 Hello，World! 文 本 ， 不 过 这 次 是 由 父 组 件 传递 了 名 字 属 性 。 
现在 这 种 模式 的 工作 原理 应 该 很 清晰 了 ， 我 们 来 看 看 它 具 有 哪些 优点 。 
































首要 优点 是 ， 可 以 像 高 阶 组 件 那样 封装 组 件 ， 在 运行 时 为 它们 传递 变量 而 不 是 固定 








EE 





以 下 的 Fetch 组 件 就 是 很 好 的 示例 ， 它 从 某 个 API 路 径 加 载 数据 ， 然 后 返回 给 chilaren 
函数 : 
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<Feteh, Urle™ ys"> 
{data => <List data={data} />} 
</Fetch> 


其 次 ， 以 这 种 方式 组 合 组 件 不 要 求 children 函数 使 用 预定 义 的 prop 名 称 。 





使 用 组 件 的 开发 者 可 以 自行 决定 函数 接收 的 变量 的 名 称 。 
这 使 得 函数 子 组 件 方案 更 加 灵活 。 
最 后 ， 封 装 器 的 可 复 用 程度 很 高 ， 因 为 它 不 关心 子 组 件 要 接收 什么 ， 只 期 望 传人 一 个 函数 。 


由 于 这 一 点 , 按 函 数 子 组 件 模式 编写 的 组 件 也 可 以 用 于 应 用 的 不 同 部 分 , 托管 各 种 各 样 的 子 
组 件 。 





























4.7 小 结 

本 章 介 绍 了 如 何 组 合 可 复 用 组 件 ， 并 让 它们 高 效 地 通信 。 

props 可 以 使 得 组 件 彼此 解 而， 并 创建 定义 清晰 的 接口 。 

接着 我 们 了 解 了 React 中 最 有 趣 的 一 些 组 合 模式 。 

第 一 种 就 是 所 谓 的 容器 组 件 与 表现 组 件 模 式 , 它 帮助 我 们 从 表现 层 抽 离 逻辑 , 并 创建 拥有 单 
一 职责 的 特定 组 件 。 

我 们 还 见识 了 React 尝试 用 mixin 解决 组 件 共 享 功能 的 问题 。 遗憾 的 是 , mixin 解决 这 个 问题 
的 同时 又 引发 了 其 他 问题 ， 影 响 了 应 用 的 可 维护 性 。 

要 想 实现 这 个 目的 而 不 增加 复杂 度 ， 其 中 一 种 方法 就 是 使 用 高 阶 组 件 。 它 们 就 是 函数 ,传人 
组 件 并 返回 增强 的 版 本 。 

recompose 库 提 供 了 一 些 有 用 的 高 阶 组 件 ， 可 以 配合 自 定义 的 高 阶 组 件 一 起 使 用 ， 这 样 可 
以 使 得 组 件 在 实现 上 尽量 少 包 含 逻 辑 。 

我 们 还 学 习 了 如 何 利用 高 阶 组 件 来 处 理 context， 避 免 其 与 组 件 发 生 耦 合 。 

最 后 ， 我 们 学 习 了 函数 子 组 件 模 式 ， 通 过 这 种 模式 来 动态 地 组 合 组 件 。 

现在 是 时 候 讨 论 一 下 数据 获取 以 及 单 向 数据 流 方面 的 知识 了 。 
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本 章 旨 在 介绍 React 应 用 可 以 使 用 的 多 种 数据 获取 模式 。 

要 想 找 到 最 佳 模式 ， 需 要 清晰 地 认识 数据 在 React 组 件 树 中 的 流动 方式 。 

理解 父子 组 件 间 的 通信 方式 很 重要 ， 理 解 无 关联 的 兄弟 组 件 间 共 享 数据 的 方式 也 很 关键 。 

我 们 将 看 到 一 些 有 关 数 据 获取 的 真实 示例 ， 并 通过 高 阶 组 件 将 基本 组 件 的 结构 写 得 更 好 。 

最 后 ， 我 们 将 探讨 react-refetch 这 类 现成 的 库 如 何 通过 提供 获取 数据 所 需 的 核心 功能 ， 
帮 我 们 节省 大 量 时间 。 

本 章 包 含 如 下 内 容 。 


口 React 的 单 向 数据 流 ， 以 及 它 如 何 使 应 用 结构 更 易于 理解 。 

口子 组 件 如 何 用 回调 函数 与 父 组 件 通 信 。 

口 两 个 兄弟 组 件 如 何 通 过 公有 父 组 件 通信 。 

口 如 何 创 建 通用 的 高 阶 组 件 来 获取 任意 API 路 径 的 数据 。 

口 react-refetch 的 工作 原理 , 以 及 为 何 可 以 将 这 个 有 用 的 工具 集成 到 项 目 中 ,从 而 更 便 
捷 地 获取 数据 。 







































































5.1 数据 流 
第 3~4 音 介绍 了 如 何 创 建 单个 可 复 用 组 件 ， 以 及 如 何 有 效 地 组 合 它们 。 
现在 我 们 开始 学 习 如 何 构建 恰当 的 数据 流 ， 以 便 应 用 能 够 跨 组 件 共享 数据 。 

React 推行 了 一 种 非常 有 趣 的 模式 ， 人 允许 数据 从 根 节点 流向 叶 节点 。 这 种 模式 通常 称 作 单 向 
数据 流 ， 本 节 将 对 其 进行 详细 介绍 。 

顾名思义 ，React 中 的 数据 流 是 单 向 的 ， 即 从 组 件 树 的 顶部 流向 底部 。 这 种 方式 有 很 多 好 处 ， 
它 简化 了 组 件 行为 以 及 组 件 间 的 关系 ， 增 强 了 代码 的 可 预测 性 和 可 维护 性 。 
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每 个 组 件 都 以 prop 的 形式 从 父 组 件 接收 数据 ， 并 且 prop 无 法 修改 。 获 取 数据 后 ， 可 以 将 其 
转换 为 新 的 形式 或 者 往 下 传 给 其 他 子 组 件 。 每 个 子 组 件 都 能 保存 内 部 状态 , 也 可 以 将 状态 作为 自 
身 笛 套 组 件 的 prop。 


到 目前 为 止 ,我 们 见 到 的 所 有 示例 都 是 父 组 件 通过 prop 将 数据 共享 给 子 组 件 。 


但 是 , 如 果子 组 件 将 数据 向 上 传 给 父 组 件 , 会 发 生 什么 呢 ? 当 子 组 件 的 状态 改变 时 ,如何 更 
新 父 组 件 呢 ? 如 果 两 个 兄弟 组 件 需要 共享 数据 , 应 该 怎么 做 ? 我们 将 通过 一 个 真实 示例 来 解答 上 
述 所 有 问题 。 


先 从 无 子 组 件 的 简单 组 件 起 步 ， 然 后 逐步 将 其 改写 得 更 清晰 、 结 构 更 好 。 
这 种 方式 将 为 我 们 展示 每 一 阶段 的 最 佳 模式 ， 以 便 应 用 于 整 棵 树 的 数据 流 。 


我 们 来 探讨 counter 组 件 的 代码 ， 该 组 件 从 0 开始 计数 且 拥 有 两 个 按钮 ， 分 别 用 于 计数 器 
值 的 增 和 减 。 


首先 ， 创 建 一 个 继承 React 的 Component 函数 的 类 ; 






































class Counter extends React .Component 


该 类 在 构造 器 中 将 计数 器 初始 化 为 0， 并 在 组 件 自身 上 绑 定 了 事件 处 理 器 : 





constructor(props) { 
super (props) 


gn lo 
counter: 0, 


} 


this.handleDecrement 
this.handleIncrement 


this.handleDecrement .bind (this) 
this.handleIncrement .bind(this) 


| 


Fn 




















事件 处 理 絮 的 代码 很 简单 ， 它 们 只 是 修改 了 状态 ,增加 或 者 减少 当前 的 计数 : 


handleDecrement () { 
this.setStatel(lt{ 
counter: this.state.counter - 1, 
} 
} 


handleIncrement () { 
this.setStatel(lt{ 
counter: this.state.counter + 1, 
} 
} 


最 后 ， 在 泻 染 方法 中 显示 当前 值 ， 每 个 按钮 的 onclick 属性 定义 好 各 自 的 处 理 器 。 














| 
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render() { 
return ( 
<div> 
<hl>{this.state.counter}</h1> 
<button onClick={this.handleDecrement}>-</button> 
<button onClick={this.handleIncrement}>+</button> 
</div> 
) 
} 


5.1.1 子 组 件 与 父 组 件 的 通信 (回调 函数 ) 
Counter 组 件 目 前 没什么 大 问题 ， 愉 是 有 多 项 形 只 责 : 
口 将 计数 器 的 值 保存 在 状态 中 ; 
口 负责 显示 数据 ; 
口 包含 增加 和 减少 计数 器 值 的 逻辑 。 
将 组 件 拆 分 得 更 小 始终 是 一 个 好 主意 。 每 个 小 型 组 件 带 有 特定 逻辑 , 这样 能 提升 应 用 的 可 维 
护 性 ， 并 且 可 以 更 灵活 地 应 对 需求 的 变更 
思考 以 下 情况 : 应 用 的 另 一 部 分 也 需要 同样 的 增 减 按钮 。 


复 用 counter 组 件 中 定义 的 按钮 固然 很 好 ,但 问题 在 于 ， 如 果 将 按钮 移 到 组 件 外 部 ， 怎 样 
得 知 何 时 点 击 了 按钮 ， 从 而 更 新 计数 需 呢 ? 


当 子 组 件 需 要 向 父 组 件 推送 信息 或 触发 事件 时 ，React 通常 采用 回调 函数 来 实现 。 
我 们 来 看 看 其 中 的 工作 原理 。 


先 创建 Buttons 组 件 来 显示 增 减 按钮 。 当 点 击 按钮 时 ,不 再 触发 内 部 函数 ， 而 是 触发 props 
上 传 来 的 函数 。 


const Buttons = ({ onDecrement, onIncrement }) => (人 
<div> 
<button onClick={onDecrement}>-</button> 
<button onClick={onIncrement}>+</button> 
</div> 


) 






































Buttons.propTypes = { 
onDecrement: React.PropTypes.func, 
onIncrement: React.PropTypes.func, 


} 
这 是 一 个 简单 的 无 状态 函数 式 组 件 ， 其 内 部 的 onclick 事件 处 理 带 会 触发 props 上 的 函数 。 
现在 看 看 如 何 将 这 个 新 组 件 集成 到 counter 组 件 中 。 
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用 新 组 件 替换 原 有 标记 即 可 ， 并 将 内 部 函数 传 给 它 ， 如 下 所 示 。 


render() { 
return ( 
<div> 
<hi>{this.state.counter}</h1i> 
<Buttons 
onDecrement={this.handleDecrement} 
onIncrement={this.handleIncrement} 
/> 
</div> 
) 
} 


其 他 部 分 都 保持 原样 ， 逻 辑 仍然 位 于 父 组 件 中 。 
现在 按钮 组 件 变 得 纯粹 了 ， 被 点 击 时 ， 它 们 只 能 通知 自身 的 拥有 者 。 





因此 , 每 当 子 组 件 需 要 向 父 组 件 推送 数据 或 者 通知 父 组 件 发 生 了 某 个 事件 时 , 可 以 传递 回调 








函数 ， 同 时 将 其 余 逻 辑 放 在 父 组 件 中 。 


5.1.2 ”公有 父 组 件 


现在 ， Counter 组 件 的 代码 看 起 来 好 多 了 > 并 且 Buttons 组 件 也 可 以 复 用 。 要 让 它 变 得 完 























全 整洁 ， 最 后 一 步 就 是 抽 离 显示 逻辑 。 








为 了 实现 这 一 点 ， 我 们 可 以 创建 一 个 Display 组 件 来 接收 所 需 的 值 并 在 屏幕 上 显示 出 来 : 
const Display = ({ counter }) => <h1>{fcountezr}</Ph1L> 


Display.propTypes = { 
counter: React .PropTypes .nurmber， 


} 





因为 不 需要 保存 任何 状态 ， 所 以 这 里 再 次 使 用 了 无 状态 函数 式 组 件 。 你 可 能 已 经 注意 到 了 ， 
其 实 没 必 要 拆 分 这 个 组 件 , 因为 它 只 泻 染 了 一 个 hi 元 素 。 然而 , 你 可 能 会 在 应 用 内 添加 CSS 类， 


显示 逻辑 以 根据 值 改变 计数 器 的 颜色 ， 等 等 。 

















总 的 来 说 , 我 们 的 目的 是 让 组 件 与 数据 源 无 关 , 这 样 就 能 在 应 用 各 部 分 的 不 同 数据 源 下 复 用 


组 件 。 
在 counter 组 件 中 使 用 新 组 件 很 简单 ， 用 Display 组 件 蔡 换 旧 标记 即 可 ， 如 下 所 示 : 
render() { 
return ( 
<div> 
<Display counter={this.state.counter} /> 
<Buttons 


onDecrement={this.handleDecrement} 
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onIncrement={this.handleIncrement} 
/> 
</div> 
) 
} 


如 你 所 见 ， 两 个 兄弟 组 件 通 过 公有 父 组 件 进行 了 通信 。 

当 被 点 击 时 ，Buttons 组 件 会 通知 父 组 件 ， 然 后 父 组 件 会 将 更 新 后 的 值 发 送 给 Display 组 
件 。 这 种 模式 在 React 中 很 常见 ， 而 且 它 可 以 有 效 地 在 没有 直接 联系 的 组 件 间 共 享 数据 。 

数据 始终 从 父 组 件 流 向 子 组 件 , 但 子 组 件 可 以 发 送 通知 给 父 组 件 ,以 便 组 件 树 按照 新 的 数据 

每 次 需要 让 两 个 没有 关联 的 组 件 相互 通信 时 , 都 要 找到 它们 的 公有 父 组 件 来 保存 状态 。 这 样 
一 来 ， 当 状态 更 新 时 ， 两 个 子 组 件 都 能 从 props 接收 新 数据 。 






































5.2 数据 获取 
上 一 节 介绍 了 在 树 中 组 件 间 共 享 数据 的 不 同 模式 。 
接 下 来 开始 学 习 React 的 数据 获取 方式 ， 以 及 这 部 分 逻辑 应 该 放 在 何 处 。 
本 节 示 例 用 获取 函数 发 起 Web 请 求 ， 后 者 是 XMLHt tpRequest 的 现代 版 。 


撰写 本 书 时 ，Chrome 和 Firefox 已 经 原生 实现 了 获取 函数 。 如 果 需 要 支持 不 同 的 浏览 需 ， 可 
以 使 用 GitHub 开发 的 获取 腻子 脚本 (fetch polyfill )。 


我 们 还 将 使 用 GitHub 的 公共 API 来 加 载 数据 。 向 以 下 路 径 传递 用 户 名 会 返回 gist 列表 : 
https://api.github.com/users/:username/gists。 


gist 就 是 一 些 便于 开发 人 员 共 享 的 代码 片段 。 


我 们 要 构建 的 第 一 个 组 件 是 一 个 简单 的 gist 列表 ， 其 中 包含 由 用 户 gaearon ( Dan Abramov ) ” 
创建 的 gist。 


接 下 来 我 们 探究 一 些 代码 并 创建 一 个 类 。 
之 所 以 采用 类 的 方式 定义 组 件 ， 是 因为 需要 保存 内 部 状态 并 使 用 生命 周期 方法 。 
class Gists extends React .Component 


然后 定义 一 个 constructor 方法 ， 在 其 内 部 初始 化 状态 : 



























































GD Dan Abramov 是 React JS 开发 团队 的 一 员 ， 同 时 也 参与 开发 了 Redux 和 Create React App。 一 一 译 者 注 
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constructor(props) { 
super (props) 


this.state = (gists: [lS 
} 


现在 来 到 最 有 趣 的 数据 获取 部 分 了 。 
用 于 获取 数据 的 代码 可 以 放 在 两 个 生命 周期 钧 子 中 : componentwillMount 和 component- 


DidMount。 





前 者 会 在 组 件 首次 浑 染 前 触发 ， 后 者 则 在 组 件 挂 载 完成 后 立即 触发 。 























使 用 前 者 似乎 是 正确 的 做 法 ， 毕 竞 我 们 希望 尽快 加 载 数据 ， 不 过 需要 注意 一 点 。 


人 


实际 上 ， 服 务 端 泻 染 和 客户 端 演 染 都 会 触发 componentWi1llMount 函数 。 





第 8 章 将 详细 介绍 服务 端 渲染 。 现 在 你 只 需要 知道 ， 当 在 服务 端 泻 染 组 件 时 ,触发 异步 API 
会 带 来 预料 之 外 的 结 





因此 ,我 们 只 能 用 componentDidqMount 钧 子 ， 这 样 就 能 确保 只 在 浏览 器 端 调用 API 请 求 。 








这 也 意味 着 首次 泻 染 过 程 中 的 gist 列表 将 是 空 的 , 可 能 要 用 第 2 章 中 介绍 的 技巧 来 显示 一 个 
加 载 动画 ， 本 节 不 对 此 展开 具体 介绍 。 





正如 前 文 所 说 ， 我 们 将 用 获取 函数 请 求 GitHub API， 以 获取 gaearon 的 gist 列表 : 


componentDidqMount () { 
fetch('https://api.github.com/users/gaearon/gists') 
.then(response => response.json()) 


.then(gists => this.setState({ gists })) 
} 





这 段 代 码 的 含义 是 , 当 componentDiaMount 钩子 被 触发 时 ,调用 获取 函数 访问 GitHub API。 





获取 函数 返回 一 个 Promise 对 象 ， 当 它 变 为 已 完成 状态 时 会 返回 响应 对 象 ， 而 调用 该 对 象 
的 JSON 方法 就 能 取得 响应 本 身 的 JSON 内 容 。 





解析 JSON 内 容 并 返回 结果 后 ， 就 能 在 组 件 的 内 部 状态 中 保存 原始 的 gist 数据 ， 以 便 演 染 方 
法 使 用 它们 。 
render() { 
return ( 





<ul> 
{this.state.gists.map(gist => ( 
<li key={gist.id}>{gist.description}</1i> 
) 
</ul> 
) 
} 
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泻 染 方法 很 简单 ， 只 要 遍历 gist 列表 并 将 每 项 gist 映射 为 <1i> 元 素来 显示 各 项 的 描述 即 可 。 


























你 可 能 已 经 注意 到 了 <1i> 元 素 的 key 属性 。 使 用 它 是 出 于 性 能 方面 的 考虑 ， 读 完 本 书后 你 
0 的 原因 。 





如 果 试 图 移 除 key 属性 ，React 会 在 浏览 器 的 控制 台 内 给 出 警告 。 


组 件 可 以 工作 正常 ,不 过 正如 之 前 所 说 ,我 们 可 以 将 泻 染 逻 辑 放 和 一 个 独立 的 子 组 件 ， 以 便 
它 更 简洁 ， 更 便于 测试 。 


移动 组 件 不 是 什么 难题 , 毕竟 我 们 已 经 知道 了 位 于 应 用 各 个 部 分 的 组 件 如 何 从 其 父 组 件 获取 
所 需 的 数据 。 


现在 ， 常 见 的 一 个 需求 是 多 处 代码 都 要 从 API 获 取 数据 ， 但 我 们 并 不 想 复制 代码 。 
要 想 从 组 件 中 移 除 数据 逻辑 并 在 整个 应 用 中 复 用 ， 其 中 一 个 解决 方案 就 是 创建 高 阶 组 件 。 


在 本 示例 中 ， 高 阶 组 件 会 代替 增强 后 的 组 件 来 加 载 数据 ， 然 后 以 prop 的 形式 向 子 组 件 提供 
数据 。 


我 们 来 看 看 具体 怎么 做 。 


我 们 已 经 知道 , 高 阶 组 件 其 实 就 是 函数 , 它 接受 组 件 和 一 些 其 他 参数 ,然后 返回 添加 了 某 些 
特殊 行为 的 新 组 件 。 


接 下 来 我 们 先 通 过 偏 函 数 写 法 接受 其 他 参数 ， 然 后 将 实际 组 件 作 为 第 二 个 参数 : 

const withData = url => Component => (...) 

withData 函数 的 命名 遵循 了 with* 前 级 模式 。 

该 函数 的 参数 为 获取 数据 的 URL 以 及 需要 数据 的 组 件 。 

这 种 做 法 和 前 面 的 示例 很 像 ， 只 不 过 现在 将 URL 作为 参数 ， 并 且 子 组 件 放 入 了 演 染 方法 。 
该 函数 返回 的 类 如 下 所 示 : 




































































class extends React.Component 


它 的 构造 器 设置 了 初始 的 空 状态 。 
注意 ， 此 处 用 于 保存 数据 的 属性 名 为 aata， 因 为 我 们 要 开发 通用 组 件 ， 不 希望 它 只 能 绑 定 
某 种 特定 格式 的 对 象 或 集合 : 


constructor(props) { 
super (props) 
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this.state = { data: [] } 
} 


componentDidMount 钩子 触发 获取 函数 ， 将 服务 端 返回 的 数据 转换 成 JSON 对 象 并 保存 在 
状态 中 : 


componentDidMount () { 
fetch (url) 
.then(response => response.json()) 
.then(data => this.setState({ data })) 
} 


需要 注意 的 是 ， 现 在 使 用 高 阶 组 件 传人 的 第 一 个 参数 来 设置 URL。 
这 样 就 能 复 用 它 向 任何 API 路 径 发 起 请 求 了 。 

最 后 ， 为 了 使 高 阶 组 件 更 加 直观 ， 泻 染 给 定 组 件 时 展开 props 对 象 。 
同时 展开 状态 ， 以 便 向 子 组 件 传递 JSON 数据 : 


render() { 
return <Component {...this.props} {...this.state} /> 


} 

非常 好 ， 高 阶 组 件 完工 了 。 

现在 我 们 可 以 封装 应 用 的 任何 组 件 ， 为 它们 提供 从 任何 URL 获取 的 数据 。 

我 们 来 看 一 下 具体 用 法 。 

首先 , 创建 一 个 不 含 数据 获取 逻辑 的 组 件 , 它 只 负责 接收 数据 并 像 最 初 示例 那样 用 标记 显示 
出 来 : 


onst, LisSt, = (tdata gieste }) eA 
<ul> 
{gists.map(gist => ( 
<li key={gist.id}>{gist.description}</1i> 
) ) } 
</ul> 


) 


























List.propTypes = { 
data: React.PropTypes.array, 
} 


以 上 代码 段 用 到 了 无 状态 函数 式 组 件 , 因为 我 们 不 需要 保存 任何 状态 , 也 不 需要 定义 事件 处 
理 需 ， 这 样 做 往往 具有 很 多 好 处 。 

名 为 aata 的 prop 包含 了 API 返 回 的 响应 , 这 种 通用 命名 对 本 组 件 没什么 用 处 , 好 在 可 以 通 
过 ES2015 语法 很 方便 地 将 它 重 命名 得 更 有 意义 。 
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接着 我 们 来 看 如 何 使 用 高 阶 组 件 withData， 使 其 将 数据 传 给 刚刚 创建 的 List 组 件 。 
得 益 于 偏 函 数 写法 , 我 们 可 以 先 定制 高 阶 组 件 来 发 起 特定 请 求 , 然后 再 多 次 复 用 它 , 如 下 所 示 : 
const withGists = withData( 

'https://api.github.com/users/gaearon/gists' 


) 


这 种 做 法 妙 在 可 以 用 新 的 withGists 吗 数 封装 任何 组 件 ， 不 用 重复 指定 URL 就 可 以 接收 
gaearon 的 gist 列表 。 


最 后 ， 封 装 组 件 并 获得 新 组 件 : 

const ListWithGists = withGists(List) 

现在 我 们 可 以 将 增强 后 的 组 件 用 在 应 用 的 任何 地 方 ， 并 且 它 都 能 正常 运行 。 

高 阶 组 件 withpata 很 棒 ， 但 只 能 加 载 静态 URL， 而 真实 的 URL 通常 取决 于 参数 或 prop。 


遗憾 的 是 ， 在 使 用 高 阶 组 件 时 prop 是 未 知 的 ， 因 此 在 发 起 API 请 求 前 ， 一 旦 获取 prop 就 需 
要 触发 某 个 钧 子 函 数 。 


可 以 修改 高 阶 组 件 ， 让 它 接受 两 种 类 型 的 URL 参数 : 一 种 是 当前 实现 的 字符 串 类 型 ， 另 一 
种 是 函数 ， 它 接受 组 件 的 prop 并 根据 传人 的 参数 返回 URL。 


实现 这 一 点 很 简单 ， 修 改 componentDigMount 钩子 即 可 ， 如 下 所 示 ; 




























































































componentDidMount() { 
const endpoint = typeof url === 'function' 
2 Url(this. propey 
EL 


fetch (endpoint) 
.then(response => response.json()) 
.then(data => this.setState({ data })) 
} 


如 果 URL 是 函数 ， 就 以 props 为 参数 来 执行 它 ; 如 果 URL 是 字符 串 ， 那 么 就 直接 使 用 。 
现在 可 以 按照 如 下 方式 使 用 这 个 高 阶 组 件 : 
const withGists = withDatal 

props => ‘https://api.github.com/users/${props.username}/gists. 


) 
可 以 在 组 件 的 prop 中 设置 username 参数 ， 用 于 加 载 gist。 























<ListWithGists username="gaearon" /> 
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5.3 react-refetch 
现在 ， 高 阶 组 件 可 以 按 预 期 工作 ， 并 且 我 们 可 以 在 代码 库 中 复 用 它 。 
问题 是 ， 如 果 需 要 更 多 特性 ， 该 怎么 办 ? 
举例 来 说 ， 我 们 可 能 想 向 服务 端 发 送 一 些 数据 ， 或 者 在 prop 改变 时 重新 获取 数据 。 
另外 ， 我 们 可 能 不 想 在 componentDidMount 中 加 载 数据 ， 而 是 采用 其 他 延迟 加 载 策 略 。 
显然 ,我 们 可 以 动手 写 出 需要 的 一 切 特性 ， 但 有 个 现成 的 库 已 经 提供 了 大 量 有 用 的 功能 。 
这 个 库 名 叫 react -refetch， 由 Heroku 的 开发 人 员 维 护 。 
我 们 来 看 看 如 何 用 它 有 效 地 替换 高 阶 组 件 。 
上 一 节 中 的 List 组 件 是 一 个 无 状态 函数 式 组 件 ， 它 接受 gist 集 合并 显示 各 项 的 描述 : 
oonst List = ({ detat gists }) => | 

A git Lo)> (gio escription) </13> 


</ul> 


) 
































List.propTypes = { 
data: React.PropTypes.array, 
下 
将 该 组 件 封装 进 高 阶 组 件 withData 后 ， 就 可 以 通过 prop 直观 地 为 它 提 供 数据 。 我 们 要 做 
的 就 是 增强 它 ， 传 人 URL 路 径 即 可 。 
可 以 用 react-refetch 实现 同样 的 目的 。 首 先 ， 安 装 这 个 库 : 
npm install react-refetch --save 


接着 导入 该 模块 的 connect 函数 : 








import { connect } from 'react-refetch' 


最 后 ， 用 connect 这 个 高 阶 组 件 装饰 原 有 组 件 。 
我 们 利用 偏 函 数 技巧 将 该 函数 特殊 化 ， 然 后 再 复 用 它 : 














const connectWithGists = connect (({ username }) => ({ 
gists: ‘https://api.github.com/users/${username}/gists, 


)) ) 
上 述 代码 的 含义 如 下 。 
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我 们 将 一 个 函数 作为 参数 传人 connect 函数 。 参 数 函 数 接受 props ( 以 及 context ) 作为 参 
数 ， 这 样 就 能 根据 组 件 的 当前 属性 创建 动态 的 URL。 


传人 的 回调 函数 返回 一 个 对 象 ， 该 对 象 的 键 名 标识 相应 的 请 求 ， 键 值 就 是 URL 路 径 。 
URL 并 不 局 限于 字符 串 形 式 。 稍 后 我 们 将 探讨 如 何 为 请 求 添 加 多 个 参数 。 

现在 ， 可 以 用 刚刚 创建 的 函数 来 增强 组 件 ， 如 下 所 示 : 

const ListWithGists = connectWithGists(List) 

原 有 组 件 需 要 稍 作 改 动 才能 用 于 新 的 高 阶 组 件 。 

首先 ， 参 数 名 不 再 是 data， 而 是 gists。 

实际 上 ，react-refetch 库 注 入 的 属性 与 我 们 在 connect 函数 中 指定 的 键 同名 。 
gists prop 并 不 是 真正 的 数据 ， 而 是 一 种 名 为 Promisestate 的 特殊 对 象 。 


PromiseState 对 象 是 Promise 的 同步 表示 ， 并 且 它 具备 一 些 很 有 用 的 属性 ， 如 pending 
和 fulfilleda， 可 以 利用 这 两 个 属性 来 显示 加 载 动画 或 数据 列表 。 


它 还 有 一 个 用 于 处 理 异 常情 况 的 rejected 属性 。 


当 请 求 变 成 已 满足 状态 时 , 可 以 通过 value 属性 访问 需要 加 载 的 数据 , 并 遍历 它 来 显示 gist 
列表 : 




























































































const List = ({ gists }) => ( 
gists.fulfilled && ( 
<ul> 


{gists.value.map(gist => ( 
<11 key={gist.id}>{gist.description}</1i> 
) 
< /AES 
) 
) 


一 旦 无 状态 函数 式 组 件 完成 泻 染 ， 就 检查 请 求 是 否 为 已 满足 状态 ; 如 果 是 ， 则 用 gists.value 
嚼 性 显示 列表 。 


其 他 一 切 保持 不 变 。 
另外 ， 还 需要 更 新 组 件 的 propTypes ， 并 修改 所 接收 prop 的 名 称 和 类 型 : 











List.propTypes = { 
gists: React.PropTypes.object, 
} 


既然 项 目 引 入 了 这 个 库 ， 我 们 可 以 为 List 组 件 添加 更 多 功能 。 
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举例 来 说 ， 可 以 添加 按钮 来 为 gist 加 星 。 

先 从 UI 着 手 ， 然 后 利用 react-refetch 库 添加 真正 的 API 请求。 

我 们 不 希望 在 List 组 件 中 增加 过 多 功能 ， 因 为 其 职责 就 是 显示 列表 。 因 此 ， 改 用 子 组 件 泻 
染 每 一 行 。 


新 组 件 命名 为 eist ， 我 们 将 它 用 在 循环 内 部 ， 如 下 所 示 : 


























Gonst, TlestrS: (OLetes }) E> ( 
gists.fulfilled && (人 
<ul> 


{gists.value.map(gist => ( 
<Gist key={gist.id} {...gist} /> 
) 让 
</ul> 
) 
) 


用 Gist 组 件 替换 <1i > 元素 即 可 ,接着 展开 gist 对象 并 传 给 组 件 , 这样 它 就 能 接受 单个 属性 ， 
测试 和 维护 也 更 加 方便 。 


Gist 组 件 是 无 状态 函数 式 组 件 ， 因 为 加 星 逻 辑 交 由 react-refetch 库 处 理 ， 所 以 组 件 自 
身 不 需要 任何 状态 和 事件 处 理 器 。 


组 件 接受 description 属性 , 并 且 目 前 其 与 原 有 标记 的 区 别 仅 在 于 多 了 一 个 +1 按钮 。 接 下 
来 我 们 将 给 这 个 按钮 添加 一 些 功 能 : 


CONnet :OLEt es. "(escription. Fy ss 
Sab 
{description} 
<button>+1</button> 
</1i> 


) 












































Gist.propTypes = { 
description: React.PropTypes.string, 


} 

为 gist 加 星 的 URL 路 径 是 https://api.github.com/gists/:id/star?access_ token=:access_token。 
此 处 的 :ia 就 是 需要 加 星 的 gist 的 ID，access_token 是 执行 加 星 操作 所 需 的 认证 令 牌 。 
获取 认证 令 牌 的 方式 有 很 多 ，GitHub 的 文档 提供 了 很 详细 的 解释 。 
这 些 内 容 同样 超出 了 本 书 的 范畴 ， 因 此 本 节 不 进行 详细 介绍 。 

下 一 步 是 在 按钮 的 onclick 事件 上 添加 函数 ， 以 便 用 gist 的 了 调用 API。 
react-refetch 库 的 connect 函数 接受 一 个 函数 作为 第 一 个 参数 。 正 如 我 们 之 前 所 见 , 这 
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个 函数 需要 返回 包含 请 求 的 对 象 。 
如 果 这 些 请 求 的 值 是 字符 串 ， 那 么 取得 prop 后 就 会 立马 开始 获取 数据 。 
如 果 茶 个 请 求 的 值 是 函数 ， 那 么 它 会 传递 给 组 件 ， 并 且 可 以 延迟 触发 。 
举例 来 说 ， 可 以 在 某 个 事件 发 生 时 触发 它 。 








我 们 来 探讨 以 下 代码 : 

const token = 'access_token=123' 

const connectWithStar = connect(({ id }) => ({ 
stars () > .(( 


starResponse: { 
url: ‘https://api.github.com/gists/${id}/star?$ {token}, 
method: 'PUT', 





})) 
首先 ， 按 偏 函数 方式 使 用 connect 函数 ， 并 用 prop id 构造 URL。 


接着 定义 请 求 对 象 ， 其 中 键 名 是 star， 键 值 是 函数 , 并且 这 个 函数 也 返回 请 求 对 象 。 在 本 例 
中 , starResponse 对 应 的 键 值 不 是 简单 的 字符 串 , 而 是 包含 url 和 method 这 两 个 参数 的 对 象 。 


这 样 做 是 因为 react-refetch 库 默认 发 出 HITP cET 请 求 , 但 本 例 需 要 用 PUT 请 求 为 gist 
加 星 。 


现在 是 时 候 增强 组 件 了 : 



































const GistWithStar = connectWithStar(Gist) 


同时 在 组 件 内 用 star 函数 发 起 请 求 : 


const Gist = ({ description, star }) => ( 
去 二 于 之 
{description} 
<button onClick={star}>+1</button> 
</1i> 


) 


Gist.propTypes = { 
description: React.PropTypes.string, 
star: React.PropTypes.func, 


} 


如 你 所 见 ， 代 码 非常 简单 ; 组 件 接收 star 函数 ，star 就 是 我 们 在 connect 函数 中 定义 的 
请 求 名 称 。 点 击 按钮 时 触发 该 函数 。 
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浏览 器 中 的 最 终结 有 果 如 下 所 示 : 


$ React App 


C © localhost 


物 


Welcome to React 





Marble-style sequencer + sampler for https://github.com/FormidableLabs/react-music +1 
asic 
connect.js explained +1 

/Users/dan/.config/fish/functions/fish_prompt.fish +1 

Drop-in replacement for React Router <Link> that works with React Redux optimizations 
(https://github.com/reactjs/react-router/issues/470) +1 
Breaking out of Redux paradigm to isolate apps +1 
esnextbin sketch +1 
https://github.com/rackt/redux/issues/1315 +1 
How l'd do code splitting in Redux (pseudo code, not tested!) +1 
Redux without the sanity checks in a single file. Don't use this, use normal Redux. :-) +1 
Redux undo reducer factory example by @iclanzan +1 
Super minimal React + Redux app +1 
Basic action monitoring for Redux +1 
Combining Stateless Stores +1 
Time travelling concept with reducey stores and state atoms inspired by 
https://gist.github.com/threepointone/43f16389fd96561a8b0b#comment-1447275 +1 
Statefuljs +1 
React DnD 1.0 alpha example +1 
Functional “component wrapper” API. A variation on 











你 应 该 也 注意 到 了 ，, 多亏 了 react-refetch 库 ， 组 件 可 以 保持 无 状态 ， 而 且 无 须 关 心 它 们 
所 触发 的 操作 。 





这 使 得 测试 更 加 方便 ， 并 且 我 们 可 以 在 不 修改 子 组 件 的 情况 下 改变 高 阶 组 件 的 实现 。 


5.4 小 结 


React 中 的 数据 获取 之 旅 已 经 结束 ， 现 在 你 已 经 了 解 了 如 何 向 API 路 径 发 送 数据 并 从 API 路 
径 接收 数据 。 


我 们 学 习 了 React 数据 流 的 工作 方式 ， 以 及 为 何 它 所 推行 的 这 种 方式 能 使 应 用 更 简洁 。 




















我 们 探究 了 几 种 最 常见 的 模式 ， 它 们 使 子 组 件 可 以 通过 回调 函数 与 父 组 件 通信 。 
我 们 还 学 习 了 如 何 利 用 公有 父 组 件 在 没有 直接 关联 的 组 件 间 共 享 数据 。 

5.2 节 从 加 载 GitHub 数据 的 简单 组 件 起 步 ， 利 用 高 阶 组 件 将 其 改写 为 可 复 用 组 件 。 
我 们 掌握 了 如 何 从 组 件 中 抽象 出 逻辑 ， 让 它们 尽量 无 关 ， 从 而 提升 组 件 的 可 测试 性 。 


最 后 , 我 们 学 习 了 如 何 利用 react -refetch 在 组 件 中 应 用 数据 获取 模式 , 并 避免 重复 发 明 
轮子 。 


下 一 章 将 介绍 如 何在 浏览 器 中 有 效 地 使 用 React。 








第 6 章 


为 浏览 器 编写 代码 











在 浏览 器 中 使 用 React 时 有 一 些 特 定 用 法 。 举 例 来 说 , 可 以 要 求 用 户 通过 表单 输入 某 些 信息 ， 
接 下 来 我 们 将 探究 React 如 何 用 各 种 技巧 处 理 表单 。 


我 们 可 以 实现 自由 组 件 ， 以 允许 表单 域 保存 自己 的 内 部 状态 。 也 可 以 使 用 受 控 组 件 , 它们 的 
表单 域 状态 完全 由 我 们 控制 。 


本 章 还 将 探究 React 事 件 的 工作 原理 ， 以 及 库 如 何 实现 菜 些 高 级 技巧 ， 以 提供 跨 浏览 圳 的 统 
一 接口 。 接 着 我 们 还 将 讨论 React 团队 实现 的 一 些 有 趣 方案 , 这 些 方案 使 得 事件 系统 变 得 更 高 效 。 


介绍 完事 件 后 ， 我 们 将 介绍 ref， 了 解 如 何在 React 组 件 中 访问 底层 DOM 节点 。 这 项 特性 很 
强大 ， 但 应 该 谨慎 使 用 ， 因 为 它 打 破 了 使 得 React 易于 使 用 的 某 些 约定 。 


介绍 完 ref 后 ， 我 们 将 研究 如 何 用 react-motion 这 类 插件 以 及 第 三 方 库 便捷 地 实现 React 
动画 。 最后， 我 们 将 了 解 SVG 在 React 中 的 用 法 是 多 么 简单 ， 以 及 如 何 为 应 用 动态 地 创建 可 配 
置 的 图 标 。 

本 章 包含 如 下 内 容 。 
口 使 用 不 同 的 技巧 创建 React 表单 。 
口 监听 DOM 事件 ， 并 实现 自 定 义 事件 处 理 吉 。 
口 用 ref 对 DOM 节点 执行 命令 式 操 作 的 方式 。 


口 创建 跨 浏览 器 运行 的 简单 动画 。 
口 生成 SVG 的 React 方 式 。 


ne 

































































6.1 表单 


用 React 开发 真正 的 应 用 需要 与 用 户 进行 交互 。 如 果 想 要 在 浏览 器 中 要 求 用 户 提供 信息 ,最 
常见 的 做 法 就 是 使 用 表单 。 由 于 React 的 自身 原理 及 其 声明 式 特性 ， 处 理 输入 控件 以 及 其 他 表单 
元 素 与 平时 的 操作 不 太一 样 ， 不 过 一 旦 理解 了 其 中 的 逻辑 ， 一 切 就 会 变 得 很 清晰 了 。 
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6.1.1 自由 组 件 
我 们 从 一 个 最 基本 的 示例 开始 : 显示 一 张 包含 输入 框 和 提交 按钮 的 表单 。 
代码 非常 简单 ， 如 下 所 示 : 
const Uncontrolled = () => ( 
<form> 
<input type="text" /> 
<button>Submit</button> 
</form> 


) 


如 有 果 在 浏览 絮 中 执行 以 上 代码 ， 则 可 以 准确 得 到 期 望 结果 : 可 以 在 输入 框 中 输入 字符 ,按钮 
也 是 可 以 点 击 的。 本 例 展示 的 就 是 一 个 自由 组 件 , 我 们 没有 在 该 组 件 中 设置 输入 框 的 值 ,而 是 让 
组 件 自己 管理 内 部 状态 。 


大 多 数 情况 下 ， 当 提交 按钮 被 点 击 时 ， 我 们 想 要 对 输入 框 元 素 的 值 进行 操作 。 

例如 ， 我 们 可 能 想 要 将 数据 发 送 到 某 个 API 路 径 。 

实现 这 个 需求 很 简单 ， 添 加 onchange 监听 器 (本章 后 面 将 详细 介绍 事件 监听 器 ) 即 可 。 
我 们 来 探究 一 下 添加 监听 器 的 意义 。 

首先 ， 因 为 需要 定义 状态 和 一 些 函 数 ， 所 以 先 将 组 件 从 无 状态 函数 改写 为 类 : 





















































class Uncontrolled extends React.Component 
在 类 的 构造 带 中 绑 定 事件 监听 器 : 


constructor(props) { 
super (props) 


this.handleChange = this.handleChange.bind(this) 
} 


接着 定义 事件 监听 器 本 身 : 
handleChange({ target }) { 


console.log(target .value) 


} 


事件 监听 器 会 接收 一 个 事件 对 象 , 其 目标 属性 表示 发 生 事件 的 元 素 , 这 个 属性 值 正 是 我 们 想 
要 的 。 循 序 渐进 地 学 习 很 重要 ， 因 此 一 开始 先 将 值 打印 到 控制 台 ， 一 会 儿 再 保存 进 状 态 中 。 


最 后 ， 泻 染 表单 : 



























































render() { 
return ( 
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<form> 
<input type="text" onChange={this.handleChange} /> 
<button>Submit</button> 
</form> 
) 
} 


如 果 在 浏览 器 中 泻 染 以 上 组 件 , 并 在 表单 中 输入 单词 React, 我 们 会 在 控制 台中 看 到 以 下 内 容 : 





Rea 
Reac 
React 


每 当 输 入 框 的 值 改变 时 ， 就 会 触发 handlechange 监听 器 。 因 此 ， 每 输入 一 个 字符 就 会 调 
用 一 次 监听 器 函数 。 下 一 步 是 将 用 户 输 入 的 值 保存 进 状 态 ， 以 便 点 击 提交 按钮 时 可 以 获取 。 


接着 修改 处 理 器 的 实现 ， 移 除 控制 台 打 印 的 代码 并 将 值 保存 进 状态 ， 如 下 所 示 : 


handleChange({ target }) { 
this.setState({ 
Value: tardget .value， 




















} 


获取 表单 提交 事件 与 监听 输入 框 改变 事件 很 相似 , 两 者 都 是 某 些 情况 发 生 时 由 浏览 器 触发 的 
事件 。 


因此 ， 在 构造 器 内 增加 第 二 个 事件 处 理 器 ， 如 下 所 示 : 


constructor(props) { 
super (props) 








this.state = { 
value: '', 


} 
this.handleChange 


this.handleSubmit 
} 


男 外 ,将 状态 的 值 属性 的 默认 值 设置 为 空 字符 串 ， 以 免 触发 改变 事件 前 就 点 击 了 提交 按钮 。 


接着 定义 handleSubmit 函数 ,该 函数 只 会 在 控制 台 打 印 值 。 在 真实 场景 中 ， 可 以 用 它 向 
API 路 径 发 送 数 据 ， 或 者 将 其 传 给 男 一 个 组 件 。 


handleSubmit(e) { 
e.preventDefault () 


this.handleChange.bind (this) 
this.handleSubmit.bind(this) 





console.log(this.state.value) 


} 
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处 理 器 代码 很 简单 : 它 只 是 将 当前 状态 保存 的 值 打印 出 来 。 同时 我 们 想 要 阻止 浏览 器 提交 表 


单 时 的 默认 行为 ， 


转 而 执行 自 定义 操作 。 








这 种 做 法 看 似 很 合理 ,而 且 单 个 表单 元 素 的 情况 下 能 够 完美 运行 。 问 题 是 ,多 个 表单 元 素 的 
情况 下 怎么 办 ?” 假设 有 数 十 个 表单 元 素 呢 ? 


我 们 再 来 看 一 个 手动 创建 每 个 表单 元 素 与 处 理 器 的 基本 示例 , 并 讨论 如 何 应 用 不 同 层次 的 优 


化 手段 来 改进 它 。 





创建 一 张 包 含 姓 和 名 两 个 输入 框 的 新 表单 。 这 里 可 以 复 用 刚刚 创建 的 自由 类 , 并 修改 其 构造 


器 ， 如 下 所 示 : 


constructor 





(props) { 


super (props) 


this.stat 


e={ 


firstName: '' 


lastNam 


} 


this.hangd 
this.ha 


Ee: 1 


leChangeFirstName = 
ndleChangeFirstName.bingd(this) 














this.handleChangeLastName = this.handleChangeLastName.bind (this) 
this.handleSubmit = this.handleSubmit .bind(this) 


} 





在 状态 中 初始 化 这 两 个 输入 框 的 值 ， 并 为 它们 分 别 定义 事件 处 理 器 。 你 可 能 已 经 注意 到 了 ， 


这 种 做 法 在 输入 机 














匡 很 多 时 很 难 扩展 ,但 重点 在 于 清晰 到 


解 问题 所 在 ,然后 再 迁移 到 更 灵活 的 方案 。 





现在 我 们 来 实现 新 的 处 理 右 ， 如 下 所 示 : 


handleChang 
this.sets 


eFirstName({ target }) { 
tatel(lt{ 


firstName: target.value, 


} 
} 


handleChang 
this.sets 
lastNam 

} 


eLastName ({ target }) { 
tatel(lt{ 
e: target.value, 


提交 按钮 的 处 理 器 也 要 稍 作 修改 ， 以 便 在 被 点 击 时 显示 姓 与 名 : 


handleSubmi 


t(e) { 


e.preventDefault() 


console.log( $s{this.state.firstName} S${this.state.lastName}.) 


} 
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最 后 ， 在 render 方法 中 编写 元 素 结构 : 


render() { 
return ( 
<form onSubmit={this.handleSubmit}> 
<input type="text" onChange={this.handleChangeFirstName} /> 
<input type="text" onChange={this.handleChangeLastName} /> 
<button>Submit</button> 
</form> 
) 
} 


一 切 准备 就 绪 : 在 浏览 器 中 运行 以 上 组 件 将 会 看 到 两 个 输入 框 。 如 果 在 第 一 个 输入 框 中 输入 
Dan， 第 二 个 中 输入 Abramov， 那 么 提交 表单 后 就 会 在 浏览 器 控制 台中 看 到 全 名 。 


这 个 组 件 还 是 完美 运行 起 来 了 , 而且 我 们 可 以 按 这 种 方式 做 很 多 有 趣 的 事 , 但 该 组 件 无 法 在 
不 编写 大 量 模板 代码 的 情况 下 应 对 复杂 场景 。 


接 下 来 我 们 看 看 如 何 对 它 稍 作 优 化 。 
我 们 的 基本 目的 是 使 用 单个 改变 处 理 咒 ,这样 不 用 创建 新 监听 器 就 能 添加 任意 数量 的 输入 框 。 
回 到 构造 器 中 并 定义 单个 改变 处 理 器 : 


























constructor(props) { 
super (props) 


this.state = { 
firstName: '!' 
lastName: '!' 


} 
this.handleChange 
this.handleSubmit 
} 
我 们 可 能 仍然 想 要 对 值 进行 初始 化 ， 本 节 后 面 将 介绍 如 何 为 表单 提供 预 置 值 。 


现在 ， 有 趣 的 地 方 在 于 如 何 修改 onchange 处 理 器 的 实现 ， 以 便 它 能 处 理 不 同 的 输入 框 : 


this.handqlechange.bind(this) 
this.handqleSupmit .bind(this) 


handleChange({ target }) { 
this.setState({ 
[target .name] : tardget .value， 
} 


正如 我 们 前 面 所 见 , 事件 对 象 的 目标 属性 表示 触发 事件 的 输入 框 。 因 此 , 我 们 可 以 将 输入 框 
名 称 及 其 值 作为 变量 。 


接着 在 泻 染 方法 中 为 每 个 输入 框 设置 名 称 : 
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render() { 
return ( 
<form onSubmit={this.handleSubmit}> 
<input 
type="text" 


name="firstName" 
onChange={this.handleChange} 

/> 

<input 
type="text" 
name="lastName" 
onChange={this.handleChange} 

/> 

<button>Submit</button> 

</form> 
) 
} 


完成 。 现 在 可 以 添加 任意 数量 的 输入 框 ， 而 无 须 创建 额外 的 处 理 絮 。 








6.1.2” 受 控 组 件 


下 一 步 要 学 习 的 是 如 何 用 某 些 值 预 置 表单 元 素 , 可 以 从 服务 端 接收 这 些 值 ,也 可 以 通过 props 
从 父 组 件 接收 。 


要 想 完 全 理解 这 个 概念 ， 我 们 还 是 从 一 个 很 简单 的 无 状态 函数 式 组 件 入 手 ， 并 逐步 改进 它 。 
以 下 第 一 个 示例 展示 了 输入 框 内 部 的 预定 义 值 : 


























const Controlled = () => ( 
<form> 
<input type="text" value="Hello React" /> 
<button>Submit</button> 
</form> 


) 

在 浏览 器 中 运行 该 组 件 就 会 发 现 , 它 按 预 期 显示 了 默认 值 , 但 不 允许 我 们 修改 这 个 值 ， 也 不 
能 输入 任何 字符 。 

出 现 这 个 现象 的 原因 在 于 ，React 人 允许 我 们 声明 想 在 屏幕 上 看 到 的 东西 ， 设 置 固 定 属性 值 就 
会 导致 始终 演 染 这 个 值 ， 不 管 发 生 了 什么 其 他 操作 。 但 这 种 行为 并 不 符合 真实 应 用 的 需求 。 

如 有 果 此 时 打开 控制 台 ，React 本 身 就 会 告诉 我 们 用 法 不 对 : 


You provided a ‘value. prop to a form field without an ‘onChange. 
handler. This will render a read-only field. 


(没有 `onChange 处 理 器 的 情况 下 ， 为 表单 元 素 提供 `value`，prop 将 演 染 一 个 只 读 元 素 。) 
事实 就 是 如 此 。 
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如 果 我 们 希望 输入 框 有 默认 值 , 并 且 输 入 时 可 以 改变 这 个 值 , 那么 可 以 使 用 defaultvalue 


三 
其) 
上 








const Controlled = () => ( 
<form> 
<input type="text" defaultValue="Hello React" /> 
<button>Submit</button> 
</form> 


) 

这 样 输入 框 在 泻 染 后 就 会 显示 Hello React， 而 且 用 户 可 以 输入 任何 字符 来 改变 其 值 。 这 
么 做 可 行 ， 也 可 以 很 好 地 运行 ,但 我 们 想 要 完全 掌控 组 件 值 ,为 此 ,应 该 将 组 件 从 无 状态 函数 改 
写 为 类 : 








class Controlled extends React.Component 


和 往常 一 样 ， 先 定义 一 个 构造 器 来 初始 化 状态 , 本 例 中 即 为 输入 框 的 默认 值 。 同 时 绑 定 表单 
工作 所 需 的 事件 处 理 器 。 


我 们 只 使 用 单个 处 理 器 , 它 会 用 名 字 属 性 更 新 状态 , 我 们 已 经 在 优化 版 自由 组 件 的 示例 中 见 
过 这 种 做 法 : 











constructor(props) { 
super (props) 


this.state = { 
firstName: 'Dan', 
lastName: 'Abramov', 


} 


this.handleChange 
this.handleSubmit 


this.handleChange.bind (this) 
this.handleSubmit.bind(this) 


} 
处 理 需 与 之 前 示例 中 的 相同 : 


handleChange({ target }) { 
this.setState({ 
[target .name] : tardget .value， 
} 
} 





handleSubmit(e) { 
e.preventDefault () 


console.log( “$s{this.state.firstName} S${this.state.lastName}.) 


} 


需要 重点 修改 的 是 泻 染 方法 。 实际 上 , 我 们 用 输入 框 的 值 属 性 来 设置 初始 值 ， 就 像 一 开始 做 
的 那样 : 
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render() { 
return ( 
<form onSubmit={this.handleSubmit}> 
<input 
type="text" 


name="firstName" 
value={this.state.firstName} 
onChange={this.handleChange} 


/> 
<input 
type="text" 
name="lastName" 
value={this.state.lastName} 
onChange={this.handleChange} 
/> 
<button>Submit</button> 
</form> 


) 
} 


首次 泻 染 表单 时 ，React 将 状态 中 的 初始 值 作为 输入 框 的 值 。 当 用 户 输 入 一 些 内 容 后 ， 
handleChange 也 数 被 调用 ， 并 将 输入 框 的 新 值 保存 进 状 态 。 


当 状 态 发 生变 化 时 ，React 会 重新 泻 染 组 件 ， 并 再 次 将 状态 值 显示 为 输入 框 的 当前 值 。 
现在 我 们 完全 掌控 了 表单 元 素 的 值 ， 这 种 模式 称 为 受 控 组 件 。 





6.1.3 JSON schema 


现在 我 们 知道 了 React 表单 的 工作 原理 ,为 了 避免 编写 大 量 模板 代码 并 保持 代码 简洁 ， 接 下 
来 我 们 将 学 习 表 单 的 自动 创建 。 


最 流行 的 解决 方案 就 是 由 mozilla-services 所 维护 的 react-jsonschema-form。 首 先 ， 用 


npm 安装 这 个 库 : 



































npm install --save react-jsonschema-form 


安装 完成 后 ， 在 组 件 内 导入 这 个 库 : 





import Form from 'react-jsonschema-form' 


然后 定义 如 下 所 示 的 schema: 





const schema = { 
type: 'object', 
properties: { 
firstName: { type: 'string', default: 'Dan' }, 
lastName: { type: 'string', default: 'Abramov' }, 
ye 
} 
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本 书 不 会 涉及 JSON Schema 格式 的 细节 : 此 处 重点 在 于 用 配置 对 象 描述 表单 域 ， 无 须 创 建 
多 个 HTML 元 素 。 





如 上 例 所 示 ， 我 们 将 schema 的 类 型 设 为 对 象 ， 然 后 声明 表单 的 firstName 和 lastName 
时 性 ， 每 个 属性 都 有 各 自 的 字符 串 类 型 与 默认 值 。 


将 schema 对 象 传递 给 从 库 中 导入 的 Form 组 件 ， 就 会 自动 生成 一 张 表单 。 
我 们 再 来 看 一 个 简单 的 无 状态 函数 式 组 件 ， 并 为 其 迭代 添加 新 特性 : 




















const JSONSchemaForm = () => (人 
<Form schema={schema} /> 
) 
如 果 在 页 面 中 泻 染 这 个 组 件 ， 那 么 我 们 就 能 看 到 schema 中 声明 的 表单 元 素 ， 以 及 一 个 提交 
按钮 。 
现在 我 们 和 希望 在 提交 表单 时 收 到 通知 ， 并 对 表单 数据 进行 某 些 处 理 。 


首先 要 做 的 就 是 将 无 状态 函数 式 组 件 改 写 为 类 ， 然 后 创建 事件 处 理 需 : 





























class JSONSchemaForm extends React .Component 


在 构造 带 中 绑 定 事 件 处 理 吉 : 





constructor(props) { 
super (props) 


this.handleSubmit = this.handleSubmit.bind(this) 
} 


之 前 的 示例 只 是 将 表单 数据 打印 到 控制 台 ， 而 真实 应 用 可 能 想 要 将 它们 发 到 某 个 接口 路 径 。 
handlesubmit 处 理 器 将 收 到 一 个 对 象 , 该 对 象 的 formpata 属性 包含 了 表单 域 的 名 称 和 值 : 


handleSubmit ({ formData }) { 
console.log (formData) 


} 
最 后 ， 演 染 方 法 如 下 所 示 : 


render() { 
return ( 
<Form schema={schema} onSubmit={this.handleSubmit} /> 











) 
} 


props 中 的 schema 就 是 我 们 前 面 定义 的 schema 对 象 。 它 可 以 像 当 前 示例 一 样 静态 定义 ， 也 
可 以 从 服务 端 接收 ， 或 者 用 props 组 合 而 来 。 




















102 第 6 章 为 浏览 器 编写 代码 





我 们 只 需要 将 处 理 器 函数 赋值 给 库 组 件 Form 的 onsubmit 回调 ,就 能 轻松 地 创建 可 用 表单 。 


还 有 其 他 回调 ， 比 如 每 当 表 单元 素 的 值 改 变 时 就 会 触发 的 onchange， 以 及 提交 的 表单 数据 
无 效 时 就 会 触发 的 onError。 


6.2 事件 


事件 在 不 同 浏览 器 中 的 工作 方式 稍 有 差别 。React 试 着 抽象 了 事件 的 工作 方式 ， 以 便 为 开发 
者 提供 统一 接口 。React 的 这 项 特性 非常 棒 ， 因 为 我 们 可 以 忽略 需要 兼容 哪些 浏览 涡 ， 并 编写 与 
浏览 絮 无 关 的 事件 处 理 器 和 水 数 。 

为 了 提供 这 项 特性 ，React 引入 了 合成 事件 的 概念 。 合 成 事件 对 象 封 装 了 浏览 器 提供 的 原生 
事件 对 象 ， 它 在 任何 浏览 器 中 都 具有 相同 属性 。 

为 了 给 某 个 节点 添加 事件 监听 器 ， 并 在 触发 事件 时 取得 事件 对 象 ， 我 们 可 以 用 一 个 简单 的 
常 例 来 回想 一 下 为 DOM 节点 添加 事件 的 方式 。 实 际 上 ， 我 们 用 on 加 上 驼峰 式 的 事件 名 (〈 如 
onKeyDown ) 来 定义 事件 发 生 时 所 要 触发 的 回调 。 命名 事件 处 理 器 函数 的 最 流行 做 法 就 是 事件 名 
前 加 上 nandle 前 级 (如 handleKeyDown )。 


前 面 示例 中 监听 表单 元 素 的 onchange 事件 就 应 用 了 这 种 模式 。 
我 们 来 重 写 事 件 监听 器 的 基础 示例 ， 研 究 如 何在 同样 的 组 件 中 更 好 地 组 织 多 个 事件 。 
我 们 要 实现 一 个 简单 的 按钮 ， 与 之 前 一 样 ， 先 创建 一 个 类 : 






























































class Button extends React .Compomnent 


添加 一 个 构造 需 来 绑 定 事件 监听 融 : 





constructor(props) { 
super (props) 


this.handleClick = this.handleClick.bind(this) 
} 


定义 事件 处 理 需 函数 ， 如 下 所 示 : 


handleClick(syntheticEvent) { 
console.log(syntheticEvent instanceof MouseEvent) 
console.log(syntheticEvent.nativeEvent instanceof MouseEvent) 


} 


如 你 所 见 ， 代 码 很 简单 : 我 们 只 检查 了 从 React 接收 到 的 事件 对 象 的 类 型 ， 以 及 其 封装 的 原 
生 事 件 的 类 型 。 我 们 期 望 前 者 返回 false， 后 者 返回 true。 


你 应 该 永远 不 需要 访问 原生 事件 对 象 ， 不 过 知道 访问 方式 能 在 需要 时 派 上 用 场 。 最 后 ,在 泻 
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染 方法 中 定义 按钮 ， 在 其 onclick 属性 上 赋值 事件 监听 器 : 





render() { 
return ( 
<button onClick={this.handleClick}>Click me!</button> 
) 
} 


现在 ,假设 我 们 想 要 为 按钮 添加 第 二 个 处 理 器 , 负责 监听 双击 事件 。 其 中 一 种 做 法 就 是 另外 
创建 一 个 新 的 处 理 嚣 ， 并 将 它 赋值 给 按钮 的 onpoubleclick 属性 ， 如 下 所 示 : 


<button 
onClick={this.handleClick} 


onDoubleClick={this.handleDoubleClick} 
> 





Click me! 
</button> 


记 住 , 我 们 始终 希望 能 写 更 少 的 模板 代码 ， 并 避免 复制 代码 。 因 此 ， 最 常见 的 做 法 是 为 每 个 
组 件 编写 单个 事件 处 理 器 ， 以 根据 事件 的 类 型 触发 不 同 的 操作 。 





Michael Chan 的 网 站 收集 了 大 量 的 React 模式 ， 其 中 就 有 这 个 技巧 : 


http://reactpatterns.com/#event-switch 6 


首先 ， 修 改组 件 的 构造 器 ， 因 为 我 们 现在 想 要 将 它 绑 定 到 新 的 通用 事件 处 理 器 : 


constructor(props) { 
super (props) 





this.handleEvent = this.handleEvent.bind(this) 
} 


接 下 来 实现 这 个 通用 的 事件 处 理 絮 : 


handleEvent (event) { 
switch (event.type) { 
case 'click': 
console.log('clicked') 
break 





case 'dblclick': 
console.log('double clicked') 
break 


default: 
console.log('unhandled', event.type) 


: 
} 


该 处 理 需 接收 事件 对 象 ,并 根据 事件 类 型 触发 相应 的 操作 。 如 果 每 个 事件 要 调用 一 个 函数 ( 比 
如 为 了 分 析 ) 或 者 某 些 事件 共享 相同 逻辑 ， 那 么 这 种 做 法 就 特别 有 用 了 。 
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最 后 ， 将 新 的 事件 监听 器 赋值 给 onclick 和 onDoubleclick 属性 : 








render() { 
return ( 
<button 


onClick={this.handleEvent} 
onDoubleClick={this.handleEvent} 


2 
Click me! 
</button> 
) 
} 





从 现在 起 ,如 果 需 要 为 同一 个 组 件 创建 新 的 事件 处 理 器 ,无 须 创建 新 的 方法 并 绑 定 ， 只 要 在 
switch 语句 中 增加 一 个 事例 即 可 。 


React 中 的 事件 还 有 一 些 更 有 趣 的 东西 : 合成 事件 会 被 回收 ， 并 且 存 在 唯一 的 全 局 处 理 器 。 
第 一 个 概念 是 指 我 们 不 能 保存 合成 事件 稍 后 再 用 ， 
法 对 性 能 很 有 好 处 ， 但 如 果 出 于 某 些 原因 需要 在 组 件 状态 中 保存 事件 , 那么 就 会 产生 问题 。 为 了 











解决 这 个 问题 ，React 在 合成 寻 
取 用 。 








有 件 中 提供 了 persis 














因为 它 在 操作 完成 后 就 会 变 成 nu11。 这 种 做 











t 方法 , 调用 它 就 能 持久 保存 事件 ， 以 便 稍 后 








第 二 个 有 趣 的 实现 细节 还 是 与 性 能 相关 , 并 且 它 涉及 React 为 DOM 添加 事件 处 理 器 的 方式 。 


， 我 们 就 是 在 向 React 描述 期 望 达成 的 行为 ， 但 库 本 身 不 会 在 底层 
DOM 节点 上 添加 真正 的 事件 处 理 圳 。 


只 要 使 用 on 开头 的 属性 


















































React 实际 做 的 是 在 根 元 素 上 添加 单个 事件 处 理 器 ， 由 于 事件 冒 泡 机 制 ， 这 个 处 理 器 会 监听 
所 有 事件 。 当 浏览 器 触发 我 们 想 要 的 事件 时 ，React 会 代表 相应 组 件 调 用 处 理 器 。 这 个 技巧 称 作 
事件 代理 ， 可 以 优化 内 存 和 速度 。 


6.3 ref 














人 们 喜欢 React 的 原因 之 一 就 在 于 它 的 声明 式 语 法 。 声 明 式 意味 着 你 只 需要 描述 屏幕 在 任意 
给 定时 刻 要 显示 什么 ， 然 后 React 会 负责 与 浏览 器 通信 。 这 项 特性 使 React 变 得 非常 易于 分 析 ， 








同时 也 非常 强大 。 








然而 ， 有 时 可 能 仍然 需要 访问 底层 DOM 节点 来 执行 一 些 命令 式 操 作 。 应 该 尽量 避免 这 种 做 
法 ,大 多 数 情况 下 都 能 用 符合 React 思想 的 方案 实现 相同 成 果 ， 不 过 了 解 这 种 做 法 的 可 能 性 及 其 


原理 也 很 重要 ， 以 便 我 们 拥有 更 多 选择 。 











假设 我 们 想 要 创建 包含 一 个 输入 框 和 一 个 按钮 的 简单 表单 ， 并 且 点 击 按钮 时 , 输入 框 获得 


JAY 〇 
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这 里 要 做 的 就 是 在 浏览 器 窗口 内 调用 输入 框 元 素 的 实际 DOM 实例 ， 即 输入 节点 的 focus 
方法 。 

创建 一 个 名 为 Focus 的 类 ， 并 在 构造 器 中 绑 定 handleclick 方法 : 

class Focus extends React.Component 


监听 按钮 的 点 击 事 件 ， 以 便 输入 框 获得 焦点 : 





constructor(props) { 
super (props) 


this.handleClick = this.handleClick.bind(this) 
} 


接着 完成 handleClick 方法 的 代码 : 
handleClick() { 
this.element .focus() 
} 
如 你 所 见 ， 这 里 引用 了 类 的 元 素 属性 ， 并 调用 了 它 的 focus 方法 。 
要 想 理解 这 个 元 素 属性 从 何 而 来 ， 可 以 查看 演 染 方法 的 实现 : 


render() { 
return ( 

















<form> 
<input 
type="text" 
ref={element => (this.element = element)} 
/> 
<button onClick={this.handleClick}>Focus</button> 
</form> 
) 
} 


以 上 就 是 逻辑 的 核心 。 我 们 创建 了 一 个 表单 ， 其 中 包含 一 个 输入 元 素 ， 并 在 该 元 素 的 ref 属 
性 上 定义 了 一 个 回调 函数 。 














这 个 回调 函数 会 在 组 件 挂 载 时 被 调用 ,元素 参数 表示 输入 的 DOM 实例 。 值 得 注意 的 是 ， 印 
载 组 件 时 也 会 调用 这 个 回调 ， 并 传人 null 参数 来 释放 内 存 。 回 调 函 数 要 做 的 就 是 保存 元 素 对 象 
的 引用 ,方便 以 后 使 用 (如 在 handleclick 方法 触发 时 使 用 )。 接 着 我 们 定义 了 按钮 元 素 及 其 











事件 处 理 器 。 在 浏览 器 执行 以 上 代码 后 就 会 显示 带 有 输入 框 和 按钮 的 表单 , 点 击 按钮 后 就 会 按 预 
期 那样 聚焦 输入 框 。 


前 面 提 过 ， 一 般 情况 下 应 该 尽量 避免 使 用 ref， 因 为 它们 让 代码 更 偏向 命令 式 ， 
可 读 性 与 可 维护 性 都 变 差 了 。 
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只 能 使 用 ref 的 场景 就 是 在 组 件 中 集成 其 他 命令 式 类 库 ( 如 jQuery ) 时 。 





值得 注意 的 是 ,设置 非 原生 组 件 ( 以 大 写字 母 开头 的 自 定义 组 件 ) 的 ref 回调 时 ， 接 收 到 的 
回调 参数 引用 不 是 DOM 节点 实例 ， 而 是 组 件 本 身 的 实例 。 这 一 点 非常 强大 ， 因 为 这 允许 我 们 访 








问 子 组 件 的 内 部 实例 ， 不 过 这 样 做 也 很 危险 ， 应 该 尽量 避免。 
为 了 展示 这 种 方案 的 示例 ， 我 们 来 创建 两 个 组 件 。 





Ba 





为 空 字符 串 。 














将 触发 实例 方法 。 
我 们 先 来 创建 输入 框 组 件 : 


class Input extends React.Component 








口 第 一 个 组 件 是 一 个 简单 的 受 控 输入 框 ， 它 提供 一 个 reset 函数 ， 用 于 将 答 


入 框 的 值 重 置 











口 第 二 个 组 件 是 一 张 表 单 ， 其 中 包含 上 面 的 输入 框 组件 ， 并 提供 了 一 个 重 置 按钮 点击 后 


定义 一 个 构造 名 并 设置 默认 状态 ( 空 字符 串 )， 绑 定 onchange 方法 以 及 reset 方法 , 前 者 





用 于 控制 组 件 ， 后 者 表示 组 件 的 公共 API: 


constructor(props) { 
super (props) 


this.state = { 
Value: '!' 


} 


this.reset = this.reset.bingd(this) 
this.handleChange = this.handleChange.bind(this) 





reset() { 
this.setStatel(lt{ 
Value:  ',; 
} 
} 


handleChange 方法 也 很 简单 ， 只 是 保持 组 件 状 态 与 输入 元 素 的 当前 值 同步 : 


handleChange({ target }) { 
this.setStatel(lt{ 
value: target .value, 
3 
} 
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后 ,在 renger 方法 中 定义 input 元 素 ， 以 及 它 的 受 控 值 和 事件 处 理 器 : 


render() { 
return ( 
<input 
type="text" 
value={this.state.value} 
onChange={this.handleChange} 
> 
) 





} 
接着 创建 Reset 组 件 ， 它 会 用 到 上 一 个 组 件 ， 并 在 点 击 按钮 时 调用 其 reset 方法 : 
class Reset extends React.Component 


还 是 照常 在 构造 天 内 绑 定 事件 处 理 融 : 


constructor(props) { 
super (props) 





this.handleClick = this.handleClick.bind(this) 
} 


nandleClick 方法 内 的 代码 很 有 意思 ， 这 里 调用 了 输入 框 组 件 实例 的 reset 方法 : 


handleClick() { 
this.element .reset () 


} 
最 后 ， 按 照 如 下 方式 定义 render 方法 : 








render() { 
return ( 
<form> 
<Input ref={element => (this.element = element)} /> 
<button onClick={this.handleClick}>Reset</button> 
</form> 
) 
} 


如 你 所 见 ，ref 回调 在 引用 节点 元 素 或 组 件 实例 上 基本 一 致 。 

这 个 特性 相当 强大 ， 因 为 我 们 可 以 轻易 访问 组 件 的 方法 , 不 过 要 小 心 ， 这 样 破坏 了 封装 
重 构 带 来 了 困难 。 假 设 因为 茶 些 原因 要 重 命 名 reset 方法 ,那么 你 需要 检查 用 到 它 的 所 有 父 组 
件 ， 并 全 部 修改 。 


React 非常 棒 ， 因 为 它 提 供 了 可 以 用 于 所 有 场景 的 声明 式 API， 但 同时 我 们 也 可 以 访问 底层 
DOM 节点 和 组 件 实例 ， 以 防 需要 用 它们 实现 更 高 级 的 交互 和 更 复杂 的 结构 。 
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6.4 动画 


当 谈 论 UI 与 浏览 器 时 ， 肯 定 会 涉及 动画 。 

















人 带 有 动画 的 UI 对 用 户 更 友好 ， 它 们 非常 重要 ， 能 够 通知 用 户 某 些 事 情 已 经 或 者 将 要 发 生 。 














本 节 不 会 详细 指导 如 何 创 建 动画 和 优美 的 UI， 实际 目标 在 于 提供 React 组 件 最 常用 的 动画 
解决 方案 。 


对 于 React 这 种 UI 库 ， 关键 在 于 可 以 使 开发 者 很 方便 地 创建 并 管理 动画 。React 提 供 了 一 个 
名 为 react-addons-css-transition-group 的 插件 ， 这 个 组 件 可 以 帮助 我 们 声明 式 地 创建 
动画 。 青 次 强调 ， 声 明 式 地 执行 操作 极其 强大 ， 这 使 得 代码 更 易 分 析 ， 也 更 方便 与 团队 共享 。 

我 们 来 看 看 如 何 用 这 个 React 插件 给 文本 添加 简单 的 淡 入 效果 ,然后 用 react -motion 再 实 
现 一 次 相同 的 效果 。react -motion 这 个 第 三 方 库 有 助 于 我 们 更 便捷 地 创建 复杂 动画 。 


开始 创建 动画 组 件 前 ， 先 安装 插件 : 
































npm install --save react-addons-css-transition-group 
安装 完成 后 ， 在 代码 中 导入 这 个 组 件 : 
import CSSTransitionGroup from 'react-addons-css-transition-group' 


然后 将 这 个 组 件 封 装 进 想 要 应 用 动画 的 组 件 : 








Gonst "Transition = () SF. ( 
<CSSTransitionGroup 
transitionName="fade" 
transitionAppear 
transitionAppearTimeout={500} 
> 
<hi>Hello React</h1> 
</CSSTransitionGroup> 
) 


上 述 代码 段 中 的 props 的 相关 解释 如 下 。 





首先 , 我 们 声明 了 一 个 transitionName 属性 ， ReactCSSTransitionGroup 会 将 该 属性 
的 值 用 作 子 元 素 的 类 ， 这 样 我 们 就 可 以 利用 CSS 渐变 来 创建 动画 了 。 
只 有 一 个 类 不 能 简单 地 创建 恰到好处 的 动画 , 这 就 是 为 何 要 用 渐变 组 合 根据 动画 的 状态 添加 


多 个 类 。 











在 这 个 示例 中 ，transitionAppear 用 于 告诉 组 件 ， 子 组 件 出 现在 屏幕 上 时 开始 动画 。 
因此 ， 库 要 做 的 就 是 当 组 件 完成 泻 染 后 ， 立 马 向 组 件 添 加 fade-appear 类 (其 中 fagde 就 




















A 
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是 transitionName 的 值 )。 

下 一 步 是 添加 fade-appear-active 这 个 类 , 这 样 我 们 就 可 以 通过 CSS 将 动画 从 初始 状态 
切换 到 新 的 状态 。 

另外 还 要 设置 transitionAppearTimeout 属性 来 告诉 React 动画 的 时 长 ， 以 便 React 在 动 
画 完成 后 才 从 DOM 中 移 除 动画 元 素 。 

使 元 素 变 淡 的 CSS 代码 如 下 。 

首先 ， 在 初始 动画 状态 中 定义 元 素 的 透明 度 : 

.fade-appear { 

opacity: 0.01; 
} 
然后 在 第 二 个 类 中 定义 渐变 ， 元 素 添 加 这 个 类 后 就 会 立刻 发 生 渐变 : 
































.fade-appear.fade-appear-active { 
opacity: 1; 
transition: opacity .5s ease-in; 
} 
我 们 用 ease-in 函数 让 透明 度 在 500 毫秒 (0.5s ) 内 从 0.01 渐变 至 1。 
这 很 简单 ， 我 们 还 能 创建 更 复杂 的 动画 ， 也 可 以 在 组 件 的 不 同 状 态 下 执行 动画 。 


举例 来 说 ， 当 新 元 素 作为 子 组 件 加 入 渐变 组 合 时 ， 可 以 应 用 以 -enter 与 -enter-active 














移 除 元 素 的 做 法 同 理 。 


react-motion 
随 着 动画 复杂 度 的 增加 、 多 个 动画 之 间 存 在 关联 ， 或 者 需要 为 组 件 增加 更 高 级 的 物理 行为 ， 
此 时 我 们 就 会 意识 到 渐变 组 合 的 帮助 有 局 限 ， 因 此 需要 考虑 引入 第 三 方 库 。 
用 于 创建 React 动画 的 最 流行 的 库 就 是 由 Cheng Lou 所 维护 的 react -motiono 它 非常 强大 ， 
并 且 API 十 分 简洁 易 用 ， 能 够 创建 任何 类 型 的 动画 。 
使 用 之 前 先 安装 这 个 库 : 
npm install --save react-motion 


安装 成 功 后 , 导入 Motion 组 件 和 spring 函数 。 前 者 用 于 封装 动画 元 素 , 后 者 用 于 将 一 个 
值 从 初始 状态 渐变 到 最 终 状 态 : 
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import { Motion, spring } from 'react-motion' 


查看 以 下 代码 : 





aonst, TEansTtaon Er (0y) /eS 
<Motion 
defaultStyle={{ opacity: 0.01 }} 
style={{ opacity: spring(1) }} 
> 
{interpolatingStyle => ( 
<h1 style={interpolatingStyle}>Hello React</h1l> 
) } 
</Motion> 
) 


这 段 代 码 有 不 少 有 趣 之 处 。 


首先 ， 你 可 能 已 经 注意 到 了 ， 该 组 件 使 用 了 函数 子 组 件 模式 ( 详 见 第 4 章 )， 这 种 技巧 相当 
强大 ， 可 以 定义 子 组 件 在 运行 时 接收 值 。 


接着 我 们 可 以 看 到 Motion 组 件 有 两 个 属性 : 第 一 个 属性 defaultstyle 表示 初始 样式 。 
我 们 将 透明 度 设置 为 0.01 来 隐藏 元 素 并 开始 淡 入 动画 。 


样式 属性 表示 最 终 样式 , 但 这 里 没有 直接 设置 最 终 值 ， 而 是 利用 spring 函数 ,这 样 样式 值 
就 能 从 初始 状态 渐变 到 最 终 状 态 。 


在 spring 函数 每 次 迭代 计算 的 过 程 中 , 子 函 数 会 即时 接收 到 改变 后 的 样式 值 ， 只 要 将 收 到 
的 对 象 赋值 给 子 组 件 的 样式 属性 ， 就 能 看 到 透明 度 产生 渐变 。 


这 个 库 还 有 很 多 强大 的 功能 ,一 开始 我 们 学 习 的 是 基础 概念 ,这 个 示例 应 该 讲解 得 很 清楚 了 。 


当 你 正在 做 某 个 项 目 时 ， 可 以 比较 一 下 渐变 组 合 和 react -motion 这 两 种 方式 ， 以 便 做 出 
正确 选择 。 





















































6.5 可 扩展 矢量 图 形 


最 后 ， 可 扩展 矢量 图 形 ( scalable vector graphic，SVG ) 是 最 有 趣 的 技术 之 一 ， 可 以 用 于 在 
浏览 絮 中 绘制 图 标 和 图 形 。 

SVG 非常 棒 ， 因 为 它 可 以 声明 式 地 描述 矢量 ， 这 刚好 与 React 的 理念 完美 匹配 。 

我 们 以 往 经 常用 图 标 字 体 来 创建 图 标 , 但 这 项 技术 的 问题 众所周知 , 最 大 的 问题 便 是 它 不 具 
备 可 访问 性 。 再 者 ,用 CSS 定位 图 标 字 体 相 当 困 难 ， 并 且 它 们 无 法 在 所 有 浏览 器 中 同样 美观 显 
示 。 以 上 原因 就 是 我 们 应 该 在 Web 应 用 中 改 用 SVG 的 理由 。 
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从 React 的 角度 来 看 ， 从 演 染 方法 输出 div 还 是 SVG 元 素 没有 什么 差别 ，React 的 这 一 点 非 
常 强大 。 


倾向 于 选择 SVG 的 另 一 个 理由 是 ， 可 以 用 CSS 和 JavaScript 很 方便 地 在 运行 时 修改 它们 ， 
这 使 得 它们 成 为 了 React 函数 式 编程 的 完美 候补 方案 。 


因此 ,如 果 将 组 件 看 作 带 有 props 参数 的 函数 ,就 很 好 理解 独立 SVG 图 标的 创建 方式 了 , 我 
们 可 以 控制 传人 不 同 的 props 来 实现 。 


用 React 在 Web 应 用 中 创建 SVG 的 常见 方式 是 ， 将 矢量 封装 进 一 个 React 组 件 ， 并 用 props 


查看 以 下 绘制 蓝 色 圆圈 的 简单 示例 ， 该 示例 创建 了 一 个 React 组 件 并 封装 了 一 个 SVG 元 素 : 
































Gonist. CriECEe, SI({ Xr YY Eadius -Fil }) ES 
<svg> 
LO GX QL | > 
</SVG> 


) 
如 上 所 示 , 可 以 简单 地 用 无 状态 函数 式 组 件 封 装 SVG 标记 ,组 件 props 和 SVG 标记 属性 一 致 。 
SVG 只 是 模板 ,传人 各 种 props 就 能 在 应 用 中 多 次 复 用 同一 个 circle 组 件 。 


props 的 类 型 定义 如 下 所 示 : 








Circle.propTypes = { 
X: React .PropTypes .number， 
y: React .PropTypes .number， 
radius: React .PropTypes .number， 
fill: React.PropTypes.string, 

} 


加 上 类 型 定义 的 好 处 在 于 ，SVG 及 其 属 4 
以 准确 知道 如 何 配置 图 标 。 


示例 用 法 如 下 所 示 








| 二 





的 使 用 会 更 加 明确 ， 接 口 变 得 更 加 清晰 ， 我 们 可 





本 








<Circle x={20} y={20} radius={20} fill="blue" /> 


显然 , 我 们 可 以 用 React 的 全 部 能 力 为 组 件 设 置 一 些 默认 参数 , 这 样 一 来 , 即使 演 染 circle 
图 标 时 没有 传人 props， 也 能 显示 出 内 容 。 

例如 ， 我 们 可 以 定义 默认 颜色 : 

Circle.defaultProps = { 


Ef] Ed 
} 
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这 种 做 法 对 于 构建 UI 来 说 相当 强大 ， 尤 其 是 与 团队 成 员 分 享 图 标 集 时 ， 我 们 希望 为 图 标 设 
置 一 些 默 认 值 ， 同 时 人 允许 其 他 团队 决定 自己 的 配置 ， 且 不 用 重新 创建 相同 的 SVG 形状 。 


但 在 某 些 情况 下 ， 我 们 更 希望 严格 保持 一 致 性 ， 确 保 某 些 值 不 可 修改 。 有 了 React 后 ， 这 个 
需求 就 变 得 非常 简单 了 。 


比如 ， 可 以 将 基础 的 circle 组 件 封装 进 Redcircle 组 件 中 ， 如 下 所 示 : 


























const RedCircle = ({ x, y, radius }) => ( 
<Circle x={x} y={y} radius={radius} fill="red" /> 
) 
这 里 为 颜色 设置 了 默认 值 并 且 无 法 修改 , 同时 , 其 他 props 直接 透 传 给 原来 的 circle 组 件 。 


props 的 类 型 定义 不 变 ， 但 删除 了 fil11 属性 : 








RedCircle.propTypes = { 
X: React .PropTypes .nurmber， 
y: React .PropTypes .number， 
radius: React .PropTypes .number， 


} 
以 下 截图 展示 了 React 用 SVG 生成 的 蓝 色 和 红色 圆圈 ": 





Welcome to React 




















可 以 用 这 个 技巧 创建 不 同 版 本 的 圆圈 (如 smallcircle 和 Rightcircle )， 并 提供 构建 
UI 所 需 的 一 切 。 

















在 图 中 显示 为 深 灰 色 和 浅 灰色 圆圈 。 读 者 可 以 在 本 书页 面 (http:/www.ituring.com.cn/book/2007 ) 下 载 书 中 彩色 图 
片 ， 也 可 以 自行 运行 代码 尝试 。 编者 注 
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6.6 小结 


本 章 介绍 了 针对 浏览 咒 编 写 React 代 码 的 多 种 场景 ， 其 中 包括 表单 创建 、 事 件 处 理 、 动 画 以 
及 SVG。 


React 提供 的 声明 式 编程 可 以 用 来 管理 创建 Web 应 用 时 所 要 应 对 的 方方面面 。 


以 防 需 要 ，React 允许 我 们 访问 实际 的 DOM 节点 ， 以 便 对 它们 执行 命令 式 操作 ， 如 果 需 要 
在 React 中 集成 已 有 的 命令 式 类 库 ， 那 么 这 是 非常 有 用 的 。 


下 一 章 将 介绍 CSS 与 行内 样式 ， 并 阐明 在 JavaScript 中 编写 CSS 的 意义 所 在 。 


























美化 组 件 














我 们 的 React 最 佳 实践 与 设计 模式 之 旅 已 经 进行 了 一 大 半 ， 现 在 是 时 候 考虑 美化 组 件 了 。 为 
了 实现 这 个 目标 ， 我 们 将 全 面 探讨 为 何 常 规 的 CSS 不 是 组 件 样式 的 最 佳 方案 ， 然 后 探讨 各 种 替 
代 方 案 。 

本 章 将 介绍 行内 样式 、Radium 库 、CSS 模块 以 及 Styled Components 库 ， 带 你 探索 CSS in 
JavaScript 的 奇妙 世界 。 


CSS in JavaScript 的 话题 十 分 火热 ， 而 且 饱 受 争 议 ， 因 此 ， 阅 读本 章 时 需要 大 家 持 有 开放 的 
心态 


Jo 





本 章 包含 如 下 内 容 。 


口 大 型 常规 CSS 代码 库 的 常见 问题 。 

口 在 React 中 使 用 行内 样式 的 意义 及 其 缺陷 。 

口 如 何 用 Radium 库 帮 助 完 善行 内 样式 问题 。 

口 如 何 用 Webpack 和 CSS 模块 从 零 搭 建 一 个 工程 。 

DCSS 模块 的 特性 ， 以 及 为 何 它 们 是 解决 全 局 CSS 的 绝 佳 方案 。 
口 React 组 件 样式 的 现代 化 方案 一 一 Styled Component 库 。 






































7.1 CSS in JavaScript 


2014 年 11 月 ， 当 Christopher Chedeau 在 NationJS 大 会 上 发 表演 讲 “React: CSS in your JS” 
时 ,社区 中 的 每 个 人 都 认为 React 的 组 件 样 式 要 发 生 革命 性 变化 了 。 

以 网 名 Vjeux 著称 的 Christopher 是 Facebook 的 员工 , 参与 了 React 的 开发 。 他 的 演讲 中 提 到 
了 Facebook 开发 人 员 所 遇 到 的 与 大 型 CSS 代码 库 相 关 的 一 切 问题 。 

这 些 问 题 值得 好 好 理解 一 番 , 因为 有 些 问 题 相当 和 常见 , 也 能 帮助 我 们 更 好 地 介绍 行内 样式 与 
局 部 作用 域 类 名 这 些 概念 。 
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以 下 是 演讲 过 程 中 的 一 张 幻 灯 片 ， 其 中 列 出 了 CSS 的 主要 问题 : 


计划 
大 型 CSS 代 码 库 的 问题 


1. 全 局 命名 空间 6. 解析 方式 不 确定 
2. 依赖 7. 样式 隔离 
3. 无 用 代码 移 除 


开始 介绍 最 疯狂 的 JavaScript 部 分 前 ， 我 会 介绍 尝试 使 用 大 型 CSS 代 码 库 
所 遇 到 的 所 有 问题 ， 村 


我 所 提 到 的 “大 型 代码 库 ” 是 指数 百名 开发 人 员 每 天 都 向 其 提交 代码 ， 
而 且 大 部 分 人 不 是 前 端 开发 人 员 。 








CSS 第 一 个 为 人 熟知 的 问题 就 是 所 有 选择 器 都 是 全 局 的 。 无 论 怎 样 用 命名 空间 或 者 BEM 命 
名 法 组 织 样式 ， 最 终 都 会 污染 全 局 命名 空间 ,尽管 我 们 都 知道 这 样 做 不 对 。 这 不 仅 在 原则 上 是 不 
对 的 ,还 会 引发 大 型 代码 库 的 许多 错误 ， 从 长 远 角 度 来 看 ,可 维护 性 也 会 变 得 很 糟糕 。 大 型 团队 
的 合作 有 必要 知道 某 个 特定 的 类 或 者 元 素 是 否 已 经 赋 过 样式 , 大 部 分 情况 下 我 们 更 倾向 于 添加 更 
多 类 ， 而 不 是 复 用 已 有 的 类 。 


CSS 的 第 二 个 问题 在 于 依赖 的 定义 。 实际 上 , 很 难 清晰 地 声明 某 个 特定 组 件 依赖 某 段 特定 的 
CSS 代码 ， 并 且 这 段 CSS 要 在 样式 应 用 前 加 载 完毕 。 由 于 样式 都 是 全 局 的 ， 任 何 文件 中 的 任何 
样式 都 可 以 应 用 于 任何 元 素 ， 一 不 小 心 就 会 失控 。 


前 端 开发 人 员 往 往 会 用 预 处 理 带 将 CSS 代码 分 割 成 子 模块 ， 但 最 终 为 浏览 器 生成 的 还 是 一 
个 很 大 的 全 局 CSS 文件 。 由 于 CSS 代码 库 的 体积 会 快速 膨胀 ， 失 控 在 所 难免 。 第 三 个 问题 是 无 
用 代码 移 除 。 因 为 很 难 快速 判断 哪些 样式 属于 哪个 组 件 ， 所 以 删除 代码 时 就 非常 坏 手 。 实 际 上 ， 
由 于 CSS 的 层 琶 特性 ， 删 除 一 个 选择 器 或 者 规则 都 能 在 浏览 器 中 引发 意料 之 外 的 后 果 。 


使 用 CSS 的 另 一 个 痛 点 在 于 选择 器 名 与 类 名 的 压缩 ，CSS 应 用 和 JavaScript 应 用 都 要 面临 这 
个 问题 。 这 看 起 来 似乎 很 简单 ， 但 实际 不 是 ， 即 时 应 用 或 客户 端 拼接 的 类 名 更 加 复杂 。 


无 法 压缩 和 优化 类 名 对 性 能 来 说 非常 糟糕 ， 这 对 CSS 文件 的 大 小 也 有 很 大 影响 。 


常规 的 CSS 也 很 难 做 到 在 样式 以 及 客户 端 应 用 间 共 享 常 量 。 举 例 来 说 ， 我 们 常常 需要 获取 
页 头 的 高 度 ， 以 计算 依赖 它 的 其 他 元 素 的 位 置 。 










































































































































































































































































116 第 7 章 美化 组 件 














我 们 通常 用 JavaScript API 在 客户 端 中 阅读 各 种 值 ， 但 最 理想 的 做 法 应 该 是 共享 常量 ， 避 免 
在 运行 时 进行 繁重 的 计算 。 这 就 是 Vjeux 和 Facebook 其 他 开发 人 员 试 图 解决 的 第 五 个 问题 。 


第 六 个 问题 是 CSS 解析 方式 的 不 确定 性 。 实 际 上 ，CSS 规则 的 顺序 很 重要 ， 如 果 按 需 加 载 
CSS， 则 无 法 确保 它们 的 解析 顺序 ， 进 而 导致 错误 的 样式 应 用 于 元 素 。 


举例 来 说 ， 假 设 我 们 想 要 优化 请 求 CSS 的 方式 ， 只 在 用 户 浏 览 到 某 个 特定 页 面 时 才 加 载 相 
关 的 CSS。 如 果 与 当前 页 相关 的 CSS 中 有 部 分 规则 也 能 作用 于 其 他 页 面 的 元 素 ， 由 于 它 是 最 后 
加 载 的 ， 就 会 对 应 用 其 他 部 分 的 样式 造成 影响 。 例 如 ， 如 果 返 回 前 一 页 ， 用 户 可 能 会 发 现 页 面 
UI 与 一 开始 看 到 的 稍 有 不 同 。 


要 想 控制 所 有 样式 、 规 则 以 及 导航 路 径 的 各 种 组 合 ， 难 度 非 常 大 。 但 话说 回来 ， 能 够 按 需 加 
载 CSS 对 Web 应 用 的 性 能 也 有 至 关 重 要 的 意义 。 

最 后 ，Christopher Chedeau 提出 的 第 七 个 CSS 问题 与 样式 隔离 有 关 。 实 际 上 ， 几 乎 不 可 能 在 
文件 或 组 件 间 实现 恰当 的 CSS 隔离。 选择 器 都 是 全 局 的 ， 可 以 被 轻易 覆盖 。 想 通过 元 素 上 的 类 
名 预知 其 最 终 样式 非常 困难 ， 因 为 样式 没有 隔离 ， 应 用 其 他 部 分 的 规则 会 影响 不 相关 的 元 素 。 

我 强烈 推荐 你 观看 一 遍 该 演讲 ， 以 便 了 解 这 个 话题 的 更 多 细节 ， 虽 然 它 听 起 来 有 些 强硬 ， 而 
且 存 在 争议 ， 但 仍然 会 带 来 很 多 启发 ， 并 促使 我 们 用 更 开放 的 心态 接触 与 样式 相关 的 话题 。 

本 次 演讲 的 结论 是 ， 为 了 解决 Facebook 在 使 用 大 型 CSS 代码 库 时 遇 到 的 所 有 问题 ， 可 以 采 
用 行内 样式 。 

下 一 节 将 探讨 使 用 行内 样式 的 意义 及 其 优 缺点 。 







































































7.2 行内 样式 

React 官方 文档 推荐 开发 者 在 React 组 件 上 使 用 行内 样式 。 这 听 起 来 似乎 很 奇怪 ， 因 为 我 们 
多 年 来 所 学 的 知识 都 在 宣扬 关注 点 分 离 的 重要 性 ， 不 应 该 将 标记 和 CSS 混在 一 起 。 

React 试图 改变 关注 点 分 离 这 一 概念 ， 使 其 从 技术 分 离 向 组 件 分 离 转 变 。 标 记 、 样 式 与 逻辑 
耦合 得 很 紧密 , 应 用 缺少 其 中 任何 一 个 都 无 法 正常 运行 , 这 种 情况 下 将 它们 独立 放 入 不 同文 件 只 
是 假象 上 的 分 离 。 虽 然 这 确实 有 助 于 保持 项 目 结构 清晰 ， 但 没有 带 来 任何 实质 的 收益 。 

React 将 组 件 作为 应 用 架构 的 基础 单元 ， 通 过 组 合 组 件 来 创建 应 用 。 我 们 可 以 将 组 件 放 到 应 
用 的 任何 位 置 ， 并 且 它 们 都 能 泻 染 出 相同 的 逻辑 和 UI。 


以 上 就 是 将 样式 放 入 组 件 内 部 的 原因 之 一 ， 而 React 通过 行内 形式 在 元 素 上 应 用 样式 的 做 法 
也 合情合理 。 
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首先 我 们 来 看 一 个 示例 ， 它 展示 了 如 何 利用 节点 的 样式 属性 为 React 组 件 应 用 样式 。 
我 们 创建 一 个 带 有 Click mel 文本 的 按钮 ， 并 为 其 添加 前 景色 和 背景 色 : 


const style = { 
color: 'palevioletred', 
backgroundColor: 'papayawhip', 
} 











const Button = () => <button style={style}>Click me!</button> 

如 你 所 见 ， 在 React 中 为 元 素 添 加 行内 样式 非常 简单 。 只 要 创建 一 个 对 象 ， 它 的 属性 名 就 是 
CSS 规则 名 ， 属 性 值 就 是 常规 CSS 文件 中 用 到 的 那些 值 。 

唯一 的 区 别 在 于 ,为 了 符合 JavaScript 语 法 ， 连 字符 式 的 CSS 规则 名 必须 改 为 驼峰 式 ， 另 外 
属性 值 必须 是 字符 串 ， 因 此 需要 用 引号 包 宕 起 来 。 

厂商 前 缀 方面 有 一 些 例外 人 情况。 举例 来 说 ， 如 果 我 们 想 要 定义 webkit 内 核 的 渐变 ， 应 该 使 
用 wepkitTransition 属性 , 其 中 webkit 前 组 以 大 写字 母 开 头 。 这 项 规则 对 所 有 厂商 前 级 有 效 ， 
但 ms 前 级 要 以 小 写字 母 开头 。 

数字 值 也 有 例外 : 可 以 不 带 引号 或 度量 单位 书写 它们 ， 默 认 单位 为 像素 。 

以 下 规则 设置 高 度 为 100 像素 : 


const Style = { 


height: 100, 
} 


行内 样式 的 确 可 行 ， 而 且 可 以 做 到 常规 CSS 很 难 实现 的 需求 。 举 例 来 说 ， 可 以 在 客户 端 运 
行 时 重新 计算 某 些 CSS 值 ， 你 将 在 接 下 来 的 示例 中 看 到 这 种 理念 的 强大 之 处 。 

假设 你 想 要 创建 一 个 表单 元 素 ， 其 字体 大 小 随 输 入 值 改 变 。 比 如 ， 如 果 输 入 值 为 24， 字 体 
大 小 要 变 成 24 像素 。 没 有 大 量 精力 和 重复 代码 ， 几 乎 不 可 能 通过 常规 CSS 实现 这 种 效果 。 

我 们 来 看 看 行内 样式 的 方案 有 多 简单 。 

由 于 需要 保存 状态 以 及 事件 处 理 器 ， 我 们 创建 一 个 组 件 类 ; 

class FontSize extends React .Component 


在 构造 器 中 设置 状态 的 默认 值 并 绑 定 nandlechange 处 理 器 ， 该 处 理 器 用 于 监听 输入 框 的 
onChange 事件 : 



















































































constructor(props) { 
super (props) 


this.state = { 
value: 16, 
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} 


this.handleChange = this.handleChange.bind(this) 
} 


事件 处 理 器 的 代码 很 简单 ， 我 们 用 事件 对 象 的 目标 属性 获取 输入 框 的 当前 值 : 


handleChange({ target }) { 
this.setStatel(lt{ 
value: Number (target .value), 
} 
J} 


最 后 ， 演 染 类 型 属性 为 数字 的 输入 框 ， 这 是 一 个 受 控 组 件 ， 因 为 我 们 利用 状态 更 新 它 的 值 。 
它 还 拥有 事件 处 理 带 ， 每 当 输 入 值 改变 时 就 会 触发 。 
































我 们 用 输入 框 的 样式 属性 设置 其 font -size 样式 。 如 你 所 见 ， 我 们 按照 React 的 约定 书写 
了 驼峰 式 的 CSS 规则 名 : 








render() { 
return ( 
<input 
type="number" 
value={this.state.value} 
onChange={this.handleChange} 
style={{ fontSize: this.state.value }} 
/> 
) 
} 


渲染 以 上 组 件 就 会 看 到 一 个 输入 框 , 其 字体 大 小 会 随 着 输入 值 改变 。 它 的 工作 原理 是 ， 当 输 


入 值 改变 时 , 将 新 值 保存 到 状态 中 。 修改 状 态 会 触发 组 件 重 新 渲染 ,然后 用 新 的 状态 值 设置 输入 
框 的 显示 值 与 字体 大 小 ， 这 项 功能 简单 而 又 强大 。 



































计算 机 科学 中 的 每 种 解决 方案 都 有 缺陷 ， 总 有 需要 取舍 的 地 方 。 和 遗憾 的 是 , 行内 样式 也 有 很 
多 问题 。 


举例 来 说 ,行内 样式 不 能 使 用 伪 选 择 器 ( 如 :hover ) 和 伪 元 素 ， 这 种 局 限 的 影响 在 创建 包 
含 交互 与 动画 的 UI 时 非常 显著 。 





上 述 问题 也 有 一 些 应 对 方案 ， 比 如 ， 可 以 总 是 用 真实 元 素 代替 伪 元 素 ， 但 伪 类 就 必须 用 
JavaScript 来 模拟 CSS 行为 ， 这 样 做 并 不 理想 。 




















媒体 查询 同 理 ， 它 不 能 在 行内 样式 中 使 用 ， 而 且 会 使 响应 式 Web 应 用 的 开发 变 得 很 困难 。 
为 样式 是 用 JavaScript 对 象 声 明 的 ， 所 以 也 不 能 使 用 样式 回 退 : 








display: -webkit-flex; 
display: flex; 
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实际 上 ，JavaScript 对 象 不 能 包含 两 个 同名 属性 。 应 该 极力 避免 样式 回 退 ， 但 需要 时 能 用 到 
它 再 好 不 过 。 


CSS 的 动画 特性 也 无 法 用 行内 样式 来 模拟 。 对 此 只 能 全 局 定义 动画 , 然后 在 元 素 的 样式 属性 
中 使 用 。 


需要 和 窗 盖 常规 CSS 的 某 个 样式 时 ,行内 样式 只 能 用 !important 关键 词 来 实现 ， 这 种 做 法 
非常 糟糕 ， 因 为 它 会 阻止 元 素 添加 其 他 样式 。 


使 用 行内 样式 的 最 大 问题 黄 过 于 调试 。 我 们 平时 习惯 在 浏览 器 开发 者 工具 中 用 类 名 查找 元 
素 ， 调 试 并 检查 哪 条 样式 起 作用 了 。 


因为 行内 样式 将 所 有 样式 都 列 在 其 样式 属性 中 ， 所 以 调试 检查 起 来 非常 麻烦 。 
举例 来 说 ,我 们 在 本 节 前 面 创建 的 按钮 的 泻 染 结果 如 下 所 示 : 


























<button style="color: palevioletred; background-color: papayawhip;">Click 
me!</button> 


就 这 个 按钮 而 言 ,阅读 代码 并 不 困难 , 但 想象 一 下 拥有 数 百 个 元 素 与 数 百 条 样式 的 情况 , 你 
就 会 发 现 这 个 问题 相当 复杂 。 


再 者 ， 假 设 你 正在 调试 一 个 每 一 项 都 有 相同 样式 属性 的 列表 。 如 果实 时 修改 其 中 一 个 属性 ， 
再 查看 浏览 器 中 的 结果 ,你 会 发 现 只 有 那 一 个 元 素 的 样式 生效 ， 其 他 兄弟 元 素 保持 不 变 ， 尽 管 它 
们 共享 相同 的 样式 。 


最 后 很 关键 的 一 点 是 ， 如 果 在 服务 端 浑 染 应 用 〈 第 8 章 将 介绍 该 话题 )， 使 用 行内 样式 会 使 
页 面体 积 变 得 更 大 。 


行内 样式 将 CSS 的 全 部 内 容 都 放 到 标记 中 , 发 送 给 客户 端的 文件 会 增加 很 多 , 这 会 降低 Web 
应 用 的 呈现 速度 。 


压缩 算法 可 以 改善 这 一 点 ,因为 它们 可 以 轻松 压缩 模式 相近 的 文件 ,并 且 在 某 些 情况 下 , 加 
载 关键 路 径 的 CSS 也 是 不 错 的 方案 , 但 总 的 来 说 应 该 尽量 避免 这 样 做 。 


事实 证 明 ， 虽然 行内 样式 解决 了 目标 问题 ， 却 引发 了 更 多 问题 。 


出 于 这 个 原因 , 社区 中 出 现 了 不 同 的 工具 来 试图 解决 行内 样式 带 来 的 问题 , 同时 将 样式 保留 
在 组 件 中 ,或 者 让 样式 只 能 作用 于 局 部 组 件 ， 以 获得 双赢。 


Christopher Chedeau 进行 演讲 后 ， 许 多 开发 者 开始 讨论 行内 样式 ， 也 开发 了 大 量 解决 方案 ， 
并 进行 了 很 多 试验 来 探索 CSS in JavaScript 的 全 新 方式 。 


我 自己 曾 尝 试 过 所 有 方案 并 创建 了 一 个 代码 仓库 , 用 每 种 可 用 方案 分 别 实现 了 一 个 小 小 的 按 
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钮 组 件 : 
https://github.com/MicheleBertoli/css-in-]js 
一 开始 只 有 两 三 种 方案 ， 如 今 已 经 超过 了 40 种 。 


本 童 的 后 续 内 容 将 介绍 几 种 最 流行 的 方案 。 


7.3 Radium 


Radium 是 首 批 试图 解决 前 面 提 到 的 行内 样式 问题 的 类 库 之 一 。 它 由 Formidable Labs 的 一 群 
优秀 开发 者 所 维护 ， 并 且 至 今 仍 是 最 流行 的 方案 之 一 。 


我 们 将 在 本 方 中 探 讨 Radium 的 工作 原理 、 它 解决 的 问题 ， 以 及 为 何 它 是 React 设置 组 件 样 
式 的 绝 佳 搭配 。 


接 下 来 我 们 将 创建 一 个 非常 简单 的 按钮 ， 与 本 章 前 面 示例 中 的 按钮 类 似 。 


我 们 从 无 样式 的 基础 按钮 起 步 ， 接 着 为 它 添 加 一 些 基础 样式 、 伪 类 以 及 媒体 查询 ， 并 以 此 来 
学 习 Radium 库 的 主要 特性 。 


最 初 的 按钮 代码 如 下 所 示 : 


























const Button = () => <button>Click me!</button> 
首先 ， 用 npm 安装 Radium: 
npm install --save radium 


安装 完成 后 ， 导 入 该 库 并 用 它 封 装 按钮 : 














import radium from 'radium’' 
const Button = () => <button>Click me!</button> 


export default radium(Button) 


radium 图 数 是 一 个 高 阶 组 件 〈 详 见 第 4 章 )， 它 可 以 扩展 Button 组 件 的 功能 , 并 返回 新 的 
增强 组 件 。 


此 时 在 浏览 咒 中 泻 染 按钮 不 会 看 到 什么 特别 的 东西 ， 因 为 我 们 还 没有 添加 任何 样式 。 


现在 我 们 来 创建 一 个 很 简单 的 样式 对 象 , 用 它 设置 背景 色 、 内 边 距 、 大 小 以 及 其 他 一 些 CSS 
属性 。 


上 一 节 中 说 过 ， 要 用 JavaScript 对 象 与 驼峰 式 CSS 属性 来 设置 React 的 行内 样式 : 
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const styles = { 
backgroundColor: '#ff0000', 
width: 320, 


padding: 20， 

borderRadius: 5, 
border: 'none', 
outline: 'none', 


} 
上 述 代 码 与 普通 的 React 行内 样式 没什么 差别 ， 如 果 按 照 以 下 方式 将 它 传递 给 按钮 组 件 ,， 那 
么 就 可 以 在 浏览 器 中 看 到 按钮 上 的 所 有 样式 都 生效 了 : 


const Button = () => <button style={styles}>Click me!</button> 
结果 为 以 下 标记 : 
<button data-radium="true" style="background-color: rgb(255, 0, 0); width: 


320px; padding: 20px; border-radius: 5px; border: none; outline: 
none;">Click me!</button> 


此 处 的 唯一 区 别 在 于 元 素 上 多 了 qata-radium 属性 ， 其 值 为 true。 

我 们 知道 无 法 在 行内 样式 中 定义 伪 类 。 接 着 我 们 来 看 看 Radium 如 何 解决 这 个 问题 。 
在 Radium 中 使 用 :hover 这 样 的 伪 类 很 简单 。 

只 要 在 样式 对 象 中 创建 :nover 属性 ，Radium 就 会 完成 剩余 工作 : 




















const styles = { 
backgroundColor: '#ff0000', 
width: 320, 


padding: 20， 

borderRadius: 5, 

border: 'none', 

outline: 'none', 

':hover': { 
QOLOTs EE 

} 

} 


将 以 上 样式 对 象 应 用 于 按钮 组 件 并 演 染 到 屏幕 , 鼠标 移 到 按钮 上 就 会 看 到 文本 从 默认 的 黑色 
变 成 日 色 。 


这 太 棒 了 : 可 以 一 同 使 用 伪 类 和 行内 样式 了 。 

然而 ， 如 果 打 开 开 发 者 工具 , 在 Styles 面板 选中 元 素 的 :hover 状态 ， 你 会 发 现 什 么 也 没有 
发 生 。 

能 看 到 悬 停 特效 却 无 法 用 CSS 模拟 出 来 ， 是 因为 Radium 用 JavaScript 来 应 用 和 移 除 样式 对 
象 中 定义 的 悬 停 状态 。 
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如 果 打 开 开 发 者 工具 , 将 鼠标 其 停 在 元 素 上 ,你 会 看 到 样式 属性 的 字符 串 发 生变 化 ， 其 中 动 
态 加 入 了 颜色 规则 : 

<button data-radium="true" style="background-color: rgb(255, 0, 0); width: 

320px; padding: 20px; border-radius: 5px; border: none; outline: none; 

color: rgb(255, 255, 255);">Click me!</button> 


泻 染 








Radium 的 工作 原理 就 是 为 触发 伪 类 行为 的 每 个 事件 添加 事件 处 理 锅 ， 并 监听 这 些 事件 。 
一 旦 这 些 事件 被 触发 ，Radium 就 会 改变 组 件 状态 ， 然 后 组 件 就 根据 状态 中 的 正确 样式 重新 


这 种 做 法 一 开始 可 能 令 人 感到 奇怪 ， 





的 差别 。 


六 


部 


可 以 再 添加 新 的 伪 类 


const styles = { 
backgroundColor: 
width: 320, 
padding: 20， 
borderRadius: 5, 
border: 'none', 
outline: 'none', 
':hover': { 
人 


'#£f0000', 


:active': { 
position: 
OO 

Fs 
} 


'relative', 





不 过 没有 什么 实质 缺陷 ， 


， 如 :active， 它 一 样 能 正常 运行 : 





而 且 性 能 方面 也 没有 很 明显 





Radium 提供 的 另 一 个 重要 特性 是 媒体 查询 , 它 是 开发 响应 式 应 用 的 关键 所 在 。 当 然 , Radium 























有 


const styles = { 
backgroundColor: 
width: 320, 
padding: 20， 
borderRadius: 5, 
border: 'none', 
outline: 'none', 
':hover': { 
0 二 汪汪 


'#f£f0000', 


:active': { 
position: 
Le 


'relative', 





是 通过 JavaScript 为 应 用 带 来 了 这 项 CSS 特性 。 


我 们 来 看 看 其 中 的 原理 。API 非常 相似 , 我们 只 需要 在 样式 对 象 上 添加 新 的 属性 
树 套 符合 媒体 查询 规则 时 必须 生效 的 那些 样式 : 








F 在 它 内 





| 
有 
Nm 
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} 
'@media (max-width: 480px)': { 
widthn: 160, 
} 
} 


要 想 媒 体 查询 生效 ， 还 有 一 个 必要 步骤 : 将 应 用 封装 进 Radium 提供 的 styleRoot 组 件 。 


为 了 媒体 查询 可 以 正常 工作 ,尤其 是 服务 端 泻 染 的 情况 下 ，Radium 会 将 与 媒体 查询 相关 的 
规则 注入 DOM 中 的 一 个 样式 元 素 ， 并 且 所 有 属性 都 会 添加 !important 关键 词 。 


这 样 做 是 为 了 在 Radium 计算 出 匹配 的 查询 条 件 前 ,避免 页 面 文档 切换 不 同样 式 时 发 生 闪 烁 。 
将 样式 放 和 人 样式 元 素 ， 让 浏览 器 照常 完成 工作 ， 可 以 避免 样式 闪烁 现象 。 


因此 ， 需要 导入 StyleRoot 组 件 : 

















import { StyleRoot } from 'radium' 
然后 用 它 封装 整个 应 用 : 


class App extends Component { 
render() { 
return ( 
<StyleRoot> 


</StyleRoot> 
) 
} 
} 


完成 以 上 步骤 后 ， 打 开 开 发 者 工具 就 能 看 到 Radium 在 DOM 中 注入 了 以 下 样式 : 


<style>@media (max-width: 480px){ .rmq-1d8d7428{width: 160px 
!important;}}</style> 


rmq-1d8d7428 类 已 经 自 动 添加 到 按钮 元 素 上 : 





<button class="rmq-1d8d7428" data-radium="true" style="background-color: 
rgb(255, 0, 0); width: 320px; padding: 20px; border-radius: 5px; border: 
none; outline: none;">Click me!</button> 


如 果 现 在 调整 浏览 器 窗口 大 小 ， 可 以 看 到 按钮 在 罕 屏 下 变 得 更 小 了 , 这 正 是 我 们 所 预想 的 








7.4 ”CSS 模块 


如 果 你 认为 行内 样式 方案 不 适合 自己 的 项 目 与 团队 ， 但 仍然 希望 尽量 紧密 结合 样式 与 组 件 ， 
那么 还 有 一 个 名 为 CSS 。 你 选择 。 
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7.4.1 Webpack 


在 探索 CSS 模块 并 学 习 其 工作 原理 前 ， 先 了 解 一 下 它 的 创建 过 程 及 支持 它 的 工具 是 很 有 必 
要 的 。 


我 们 在 第 2 章 中 探讨 了 如 何 编写 ES2015 代码 ， 并 用 Babel 及 其 预 设 配 置 进 行 转 译 。 随 着 应 
用 体积 的 膨胀 ， 你 可 能 还 想 要 将 代码 库 拆 分 成 模块 。 


可 以 用 Browserify 或 Webpack 这 类 工具 将 应 用 拆 分 成 小 型 模块 ， 以 便 按 需 导入 ， 同 时 仍然 
为 浏览 器 生成 一 个 大 文件 。 这 类 工具 称 作 模 块 打 包 器 , 它们 的 工作 就 是 将 应 用 的 所 有 依赖 加 载 到 
单个 打包 文件 中 ， 以 便于 在 浏览 器 中 运行 ， 因 为 浏览 器 (尚且 ) 没有 模块 的 概念 。 


Webpack 在 React 领域 特别 流行 ， 因 为 它 提 供 了 很 多 有 趣 且 好 用 的 特性 ， 第 一 个 就 是 加 载 器 
的 概念 。Webpack 理论 上 可 以 加 载 除 JavaScript 以 外 的 任何 依赖 ， 只 要 有 对 应 的 加 载 器 。 举 例 来 
说 ， 可 以 在 打包 文件 中 加 载 JSON 文件、 图 片 以 及 其 他 资源 。 


2015 年 5 月 , CSS 模块 的 创建 者 之 一 Mark Dalgleish 发 现 Webpack 还 能 打包 导入 CSS, 于 是 
他 推动 了 这 一 概念 的 发 展 。 


他 认为 ， 既 然 CSS 能 以 局 部 形式 导 和 组件， 那么 导入 的 所 有 类 名 也 可 以 带 上 局 部 作用 域 。 
他 的 “The End of Global CSS” 一 文 详 细 解释 了 这 个 概念 。 


















































7.4.2 ”搭建 项 目 


本 节 将 介绍 如 何 搭建 一 个 简单 的 Webpack 应 用 ， 其 中 会 涉及 用 Babel 转译 JavaScript， 以 及 
用 CSS 模块 加 载 打包 局 部 作用 域 的 CSS。 我 们 还 将 学 习 CSS 模块 的 全 部 特性 ， 并 探究 它 能 解决 
的 问题 。 首 先 ， 进 入 一 个 空 文件 来， 并 执行 以 下 命令 : 














npm init 
这 条 命令 会 创建 包含 一 些 默 认 配 置 的 package.json 文件 。 


现在 开始 安装 依赖 ， 先 是 Webpack， 其 次 是 webpack-dev-server， 我 们 用 它们 在 本 地 运 
行 应 用 并 实时 生成 打包 文件 : 














npm install --save-dev webpack webpack-dev-server 


安装 好 Webpack 后 ， 就 可 以 安装 Babel 及 其 加 载 器 了 。 因 为 是 用 Webpack 生成 打包 文件 的 ， 
所 以 我 们 还 要 在 Webpack 的 内 部 用 Babel 加 载 器 来 转译 ES2015 代码 : 





npm install --save-dev babel-loader babel-core babel-preset-es2015 
babel-preset-react 


最 后 ， 安 装 style-loader 和 css-loader， 这 两 个 加 载 器 用 于 启用 CSS 模块 ; 
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npm install --save-dev style-loader CSS-loader 


为 了 让 一 切 更 方便 ， 还 需要 安装 html-webpack-plugin 插件 来 创建 HTML 页 面 ， 以 便 实 
时 托管 JavaScript 应 用 。 有 了 它 , 我 们 就 不 再 需要 创建 常规 的 HTML 文件 ， 只 编辑 Webpack 配置 






































即 可 。 
npm install --save-dev html-webpack-plugin 


最 后 但 也 很 重要 的 一 步 是 ， 安 装 react 和 react-dom， 以 用 于 接 下 来 的 简单 示例 : 























npm install --save react react-dom 


现在 所 有 依赖 都 安装 完毕 了 ， 可 以 开始 配置 来 运行 应 用 了 。 





首先 ， 在 package.json 中 添加 一 条 npm 脚本 ， 以 启动 webpack-dev-server 来 托管 开发 环 





境 中 的 应 用 : 


Veeriptey 
"start": "webpack-dev-server" 


} 


Webpack 需要 从 配置 文件 中 得 知 如 何 处 理应 用 中 不 同类 型 的 依赖 。 为 此 ， 我 们 创建 
webpack.config.js 文件 ， 该 文件 会 导出 一 个 对 象 : 














module.exports = { } 


导出 的 对 象 就 是 Webpack 用 来 生成 打包 文件 的 配置 对 象 , 根据 项 目 大 小 和 特点 , 这 个 对 象 可 








以 具有 不 同 的 属性 。 
因为 我 们 和 希望 示例 尽 可 能 简单 ， 所 以 只 添加 三 个 属性 。 


第 一 个 属性 entry 告诉 Webpack 哪个 是 应 用 的 主 文件 : 


























entry: './index.js', 


第 二 个 属性 module 告诉 Webpack 如 何 加 载 外 部 依赖 。 它 有 一 个 名 为 loaders 的 属 
于 为 每 种 文件 类 型 指定 加 载 右 : 











module: { 
lJoaders: | 
{ 
Gest WN SS 
exclude: /(node_ modules|bower_components)/, 
loader: 'babel', 
aquery: { 
presets: ['es2015', 'react'], 


} 


test: /\.csss$/, 


怕 





FT 
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loader: 'style!css?modules', 
下 
六 
j 
以 上 配置 表示 用 babel-1loager 加 载 符合 正则 表达 式 ,js 的 文件 ， 这 样 它们 就 能 转译 并 载 入 
打包 文件 。 


你 可 能 还 注意 到 其 中 也 包含 预 设 配 置 。 我们 在 第 2 章 中 学 习 过 , 预 设 配 置 就 是 配置 选项 的 集 
合 ， 它 们 指导 Babel 处 理 不 同 语法 类 型 ( 比如 JSX )。 


loaders 数组 的 第 二 项 告诉 Webpack 如 何 处 理 导 入 的 CSS 文件 ， 它 用 到 了 css-loader,， 
同时 开启 modules 标记 来 启用 CSS 模块 。 转换 结果 会 传 给 style-loader, 后 者 负责 将 样式 注 
入 页 面 头 部 。 


最 后 ， 启 用 HTML 插件 来 生成 页 面 ， 用 之 前 指定 的 入 口 文件 路 径 自 动 添加 脚本 标签 : 


















































const HtmlWebpackPlugin = require('html-webpack-plugin') 
plugins: [new HtmlWebpackPlugin()] 


现在 一 切 就 绪 ， 在 终端 中 执行 npm start 命令 ， 并 在 浏览 器 中 访问 http://localhost:8080， 
然后 就 可 以 看 到 以 下 标记 被 成 功 托管 : 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Webpack App</title> 
</head> 
<body> 
<script type="text/javascript" src="bundle.js"></script></body> 
</html> 


7.4.3 ”局 部 作用 域 的 CSS 


现在 可 以 开始 开发 应 用 了 , 它 包括 一 个 和 之 前 示例 中 一 样 的 简单 按钮 。 我 们 会 用 它 展 示 CSS 
模块 的 全 部 特性 。 


创建 index.js 文件 , 将 其 作为 Webpack 配置 中 指定 的 入 口 文件 , 同时 导入 React 和 ReactDOM: 


import React from 'react' 
import ReactDOM from 'react-dom' 


接着 创建 按钮 。 和 往常 一 样 ， 按 钮 一 开始 没有 任何 样式 ， 之 后 再 逐步 加 上 样式 : 


const Button = () => <button>Click me!</button> 
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最 后 ， 将 按钮 泻 染 到 DOM 中 : 
ReactDOM.render (<Button />, document .body) 


注意 , 直接 在 主体 元 素 下 渲染 React 组件 的 做 法 不 好 , 本 示例 只 是 出 于 简洁 的 考虑 才 这 样 做 。 
现在 ， 我 们 要 为 按钮 添加 一 些 样式 : 背景 色 、 大 小 等 。 
创建 一 个 名 为 index.css 的 常规 CSS 文件 ， 并 编写 以 下 类 : 


.button { 
background-color: #ff0000; 
width: 320px; 
padding: 20px; 
border-radius: 5px; 
border: none; 
outline: none; 


} 
我 们 曾 提 过 可 以 用 CSS 模块 向 JavaScript 中 导入 CSS 文件 ; 接 下 来 我 们 来 看 看 具体 用 法 。 
在 定义 按钮 组 件 的 index,js 中 添加 以 下 代码 : 


























import styles from './index.css' 
import 语句 会 导入 一 个 样式 对 象 ， 其 所 有 属性 就 是 index.css 中 定义 的 类 。 
运行 console.1og (样式 )， 开 发 者 工具 中 会 输出 以 下 对 象 : 











一 


button: "2wpxM3yizfwbWee6k0U1D4" 
} 


这 样 看 来 ， 我 们 得 到 的 对 象 的 属性 名 就 是 CSS 类 名 ， 而 属性 值 (很 显然 ) 是 随机 字符 串 。 
后 面 我 们 会 发 现 它们 并 不 是 随机 的 ， 现 在 先 来 看 看 这 个 对 象 有 什么 作用 。 


可 以 用 这 个 对 象 设置 按钮 的 className 属性 ， 如 下 所 示 : 




















Sonst™ Batton: = ,i() E>,( 
<button className={styles.button}>Click me!</button> 


) 

回 到 浏览 器 就 能 看 到 index.css 所 定义 的 样式 在 按钮 上 生效 了 。 

这 没什么 神奇 的 , 因为 只 要 检查 开发 者 工具 就 会 发 现 , 元 素 上 新 增 的 类 名 就 是 代码 导入 的 样 
式 对 象 的 属性 字符 串 : 

<button class="_2wpxM3yizfwbWee6k0U1D4">Click me!</button> 


如 果 查 看 页 面 头 部 ， 我 们 还 会 发 现 相同 的 类 名 已 经 注入 页 面 : 
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<style type="text/css"> 

._2wpxM3yizfwbWee6kO0U1D4 { 
background-color: #ff0000; 
width: 320px; 
padding: 20px; 
border-radius: 5px; 
border: none; 
outline: none; 

} 

</style> 


以 上 就 是 CSS 和 样式 这 两 个 加 载 右 所 做 的 工作 。 


css-loader 人 允许 你 在 JavaScript 模 块 中 导入 CSS 文件 ， 并 且 启 用 modules 标记 时 ， 所 有 
类 名 都 只 作用 于 导入 它们 的 模块 。 


前 面 提 到 过 ,导入 的 字符 串 并 不 是 随机 的 ,而 是 根据 文件 散 列 值 和 其 他 一 些 参数 生成 的 , 它 
在 代码 库 中 是 唯一 的 。 


最 后 ，style-loader 接收 CSS 模块 转换 的 结果 ， 并 将 样式 注入 页 面 头 部 。 


这 种 用 法 非常 强大 ， 因 为 我 们 拥有 了 CSS 的 完整 能 力 及 表现 性 ， 又 结合 了 局 部 作用 域 类 各 
与 显 式 依赖 的 优点 。 


本 章 开头 提 过 ，CSS 是 全 局 的 ， 这 一 点 使 其 在 大 型 应 用 中 难以 维护 。 有 了 CSS 模块 ， 类 名 
就 有 局 部 作用 域 了 ， 不 会 与 应 用 其 他 部 分 的 类 名 发 生 冲 突 ， 因 此 可 以 确保 页 面 效 果 的 确定 性 。 


此 外 ， 在 组 件 内 显 式 导入 CSS 依赖 能 够 帮助 我 们 搞 清 楚 组 件 和 CSS 的 关系 。 这 在 移 除 无 用 
代码 方面 也 很 有 用 ， 因 为 删除 某 个 组 件 时 能 够 准确 找到 其 所 用 的 CSS。 


CSS 模块 就 是 常规 的 CSS， 因 此 可 以 使 用 伪 类 、 媒 体 查询 和 动画 。 
举例 来 说 ， 可 以 添加 以 下 的 CSS 规则 : 




























































































.button:hover { 
GOLOP .0 8#FFE > 
} 


.button:active { 
position: relative; 
Lor Zo 

} 


@media (max-width: 480px) { 
.button { 
width: 160px 
} 
} 
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上 述 代码 会 转换 为 如 下 代码 并 注入 页 面 文档 : 


._2wpxM3yizfwbWee6k0UlD4:hover { 
CoOlLGrE: #EE£; 
} 





._2wpxM3yizfwbWee6k0UlD4:active { 
position: relative; 
top: 2pK7 

} 


@media (max-width: 480px) { 
._2wpxM3yizfwpbWee6kO0U1D4 { 
width: 160px 
} 
} 


生成 的 类 名 在 按钮 组 件 使 用 的 每 个 地 方 都 不 一 样 , 这 就 确保 它们 能 像 预 期 一 样 可 靠 , 并 且 只 
作用 于 局 部 。 


你 可 能 已 经 注意 到 了 ,这些 类 名 的 作用 很 棒 , 但 调试 起 来 相当 困难 ， 因 为 我 们 无 法 轻易 辨别 
出 散 列 值 是 哪个 类 名 生成 的 。 


当 处 于 开发 模式 时 ,可 以 添加 一 个 特殊 的 配置 参数 ,通过 它 就 可 以 选择 作用 域 类 名 的 生成 模式 。 
举例 来 说 ， 我 们 可 以 改变 加 载 器 的 值 ， 如 下 所 示 : 
loader: 'style!css?modules&localIdentName=[local]--[hash:base64:5]', 


localIdentName 就 是 上 面 所 说 的 参数 ，[1ocal] 与 [hash:base64:5] 分 别 是 原 有 类 名 和 
5 个 字符 的 散 列 值 的 占 位 符 。 


还 有 其 他 占 位 符 ，[path] 表 示 CSS 文件 的 路 径 ，[name] 表 示 CSS 源 文件 的 名 称 。 





























启用 以 上 配置 后 ,浏览 絮 中 的 结果 如 下 所 示 : 

<button class="button--2wpxM">Click me!</button> 

这 样 既 提 高 了 可 读 性 ， 也 更 方便 调试 。 

生产 环境 下 不 需要 这 样 的 类 名 ， 更 注重 性 能 ， 因 此 我 们 想 要 更 简短 的 类 名 和 散 列 值 。 


用 Webpack 实现 这 种 需求 非常 简单 , 因为 可 以 有 多 个 配置 文件 , 以 便 用 于 应 用 生命 周期 的 不 
同 阶段 。 另 外 在 生产 环境 下 ， 不 要 直接 将 打包 文件 中 的 CSS 注入 浏览 器 ， 而 要 将 它们 提取 出 来 ， 
这 样 我 们 就 能 得 到 更 小 的 文件 包 ， 并 将 CSS 缓存 到 CDN ， 从 而 获得 更 好 的 性 能 。 


为 此 ， 我 们 需要 安装 另 一 个 名 为 extract-text-plugin 的 Webpack 搬 件 ， 它 可 以 将 CSS 
模块 生成 的 所 有 作用 域 类 放 人 一 个 真正 的 CSS 文件 。 
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CSS 模块 的 其 他 一 些 特性 也 很 值得 一 提 。 


一 个 就 是 global 关键 词 。 给 任何 类 添加 :global 前 级 ， 意 味 着 请 求 CSS 模块 不 要 为 当 
前 选择 器 加 上 局 部 作用 域 。 


举例 来 说 ， 修 改 CSS 代码 ， 如 下 所 示 : 


:global .button { 




















输出 结果 如 下 所 示 : 


“buttern { 





这 样 做 的 好 处 在 于 ， 你 可 以 应 用 不 需要 局 部 作用 域 的 样式 ， 比 如 第 三 方 组 件 。 


我 最 喜欢 的 CSS 模块 特性 是 组 合 。 有 了 它 ， 就 可 以 从 同 个 文件 或 者 外 部 依赖 中 引用 类 名 ， 
将 其 他 类 的 所 有 样式 应 用 于 一 个 元 素 。 


例如 ， 可 以 从 button 类 的 样式 规则 中 提取 设置 背景 色 为 红色 的 规则 ， 然 后 放 人 独立 的 类 ， 
如 下 所 示 











.backgroundq-red { 
background-color: #ff0000 
} 


接着 就 能 按 以 下 方式 将 它 和 button 类 组 合 起 来 : 


.button { 
Composes: background-red; 
width: 320px; 
padding: 20px; 
border-radius: 5px; 
border: none; 
outline: none; 


} 

最 终 ，button 类 的 所 有 规则 以 及 composes 声明 的 所 有 规则 都 能 作用 于 元 素 。 

这 个 特性 非常 强大 , 而 且 原 理 很 巧妙 。 你 可 能 以 为 它 和 SASS 的 aextena 方法 一 样 , 只 是 将 
组 合 类 复制 到 引用 它们 的 位 置 ， 其 实 不 是 这 样 。 简单 来 讲 ， 所 有 组 合 类 名 都 是 逐个 应 用 到 DOM 
中 的 组 件 上 。 

拿 我 们 的 示例 来 说 ， 代 码 如 下 所 示 : 


<button class="_2wpxM3yizfwbWee6k0U1D4 Sf8w9cFAdOXdRV_i9dgcOqgq">Click 
me!</button> 
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注入 页 面 的 CSS 如 下 所 示 : 


.Sf8w9cFdOXdRV_i9dgcoOqa { 
background-color: #ff0000; 
} 


._2wpxM3yizfwbWee6kOU1D4 { 
width: 320px; 
padding: 20px; 
border-radius: 5px; 
border: none; 
outline: none; 


7.4.4 ”原子 级 CSS 模块 


现在 我 们 很 清楚 组 合 的 原理 以 及 为 何 它 是 CSS 模块 的 一 项 强大 特性 。 当 开始 撰写 这 本 书 时 ， 
我 们 曾 在 我 就 职 的 YPlan 公司 中 试 着 结合 composes 的 功能 和 原子 级 CSS ( 又 以 函数 式 CSS 著 
称 ) 的 灵活 性 。 
原子 级 CSS 是 CSS 的 一 种 使 用 方式 ， 即 每 个 类 只 有 一 条 规则 。 
例如 ， 可 以 创建 一 个 类 来 设置 底部 外 边 距 为 0: 
.mb0 { 
margin-bottom: 0; 


} 
可 以 用 男 一 个 类 设置 font -weignt 属性 为 600: 

















.fw6 { 
font-weight: 600; 
} 


然后 将 这 些 原 子 类 用 在 元 素 上 : 
<h2 class="mb0 fw6">Hello React</h2> 


这 种 技巧 存在 争议 , 但 很 高 效 。 要 决定 使 用 它 并 不 容易 , 因为 它 最 终 会 导致 标记 上 有 太 多 类 ， 
进而 导致 很 难 预测 最 终结 果 。 你 可 能 想到 了 ， 这 和 行内 样式 很 相似 ， 因 为 一 个 类 只 有 一 条 规则 ， 
只 不 过 规则 名 换 成 了 短 一 些 的 类 名 而 已 。 


原子 级 CSS 的 最 大 争议 在 于 将 CSS 的 样式 逻辑 移 到 了 标记 中 ， 这 样 是 错误 的 。 类 是 在 CSS 
文件 中 定义 的 ， 却 在 视图 层 组 合 ， 每 次 修改 元 素 的 样式 都 要 同时 修改 标记 。 


另 一 方面 ， 我 们 试 着 稍微 使 用 了 原子 级 CSS， 并 发 现 它 可 以 超 快 地 搭建 原型 。 
其 实 ， 只 要 所 有 基本 规则 都 定好 ， 将 这 些 类 应 用 于 元 素 或 者 用 它们 生成 新 的 样式 都 非常 快 ， 
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这 是 一 大 优点 。 其 次 ， 使 用 原子 级 CSS 可 以 控制 CSS 文件 的 大 小 ， 因 为 创建 新 组 件 时 可 以 复 用 
已 有 类 的 样式 ， 不 需要 编写 新 样式 ， 这 对 性 能 很 有 好 处 。 

因此 ,我 们 尝试 用 CSS 模块 来 解决 原子 级 CSS 的 问题 ,并 将 这 种 技巧 称 作 原子 级 CSS 模块 。 

从 本 质 上 来 说 ， 以 创建 基础 CSS 类 ( 如 mbo ) 开始 ， 接 着 用 CSS 模块 将 它们 组 合成 占 位 类 ， 
而 不 是 将 它们 逐个 用 到 标记 上 。 
查看 以 下 示例 : 
gt 叱 福 蕊 二 全 

composes: mb0 fw6; 


} 
以 及 : 








<h2 className={styles.title}>Hello React</h2> 

这 种 做 法 非常 好 ， 因 为 样式 逻辑 仍然 保留 在 CSS 中 ， 同 时 CSS 模块 composes 帮助 将 所 有 
单个 类 应 用 到 标记 上 。 

上 述 代码 的 演 染 结果 如 下 所 示 : 

<h2 class="title--3JCJR mb0--21SyP fw6--1UJRhZ">Hel1lo React</h2> 


此 处 的 title、mb0 以 及 fw6 都 是 自动 加 到 元 素 上 的 。 并 且 它 们 都 只 作用 于 局 部 ， 因 此 我 
们 就 用 上 了 CSS 模块 的 所 有 优势 。 











7.4.5 ”React CSS 模块 


最 后 ， 还 有 一 个 很 重要 的 库 可 以 帮助 我 们 更 好 地 使 用 CSS 模块 。 你 可 能 已 经 注意 到 我 们 一 
直 用 样式 对 象 加 载 CSS 的 所 有 类 ,这 是 因为 JavaScript 不 支持 连 字符 属性 ， 所 以 类 名 只 能 是 驼峰 
式 的 。 


另外 , 引用 CSS 文件 中 不 存在 的 类 名 不 会 有 任何 提示 ， 但 类 名 列表 会 多 出 一 个 ungefined 
性 。 


为 了 各 种 有 用 的 特性 ， 我 们 希望 引入 一 个 第 三 方 包 ， 以 便 CSS 模块 用 起 来 更 顺畅 。 


现在 我 们 来 看 一 下 具体 用 法 ， 回 到 本 节 前 面 用 到 纯 CSS 模块 的 index.js 文件 中 ,将 它 换 成 使 
用 React CSS 模块 。 


第 三 方 包 名 为 react-css-modqules， 首 先 要 安装 它 : 


























| 


npm install --save react-css-modules 
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安装 完成 后 ， 在 index.js 中 导入 它 : 





import cssModules from 'react-css-modules' 
可 以 将 它 作 为 高 阶 组 件 ， 传 人 想 要 得 到 增强 的 Button 组 件 以 及 从 CSS 导入 的 样式 对 象 : 
const EnhancedButton = cssModules (Button, styles) 


然后 要 改变 按钮 组 件 的 实现 ， 不 再 使 用 样式 对 象 。 有 了 React CSS 模块 ， 就 可 以 使 用 
styleName 属性 ， 它 会 转换 为 常规 的 类 。 


这 里 的 妙 处 在 于 可 以 使 用 字符 串 形式 的 类 名 ( 如 "button" ): 

















const Button = () => <button styleName="button">Click me!</pbutton> 

现在 将 EnhancedButton 组 件 泻 染 到 DOM 中 ， 我 们 会 看 到 效果 和 之 前 完全 一 样 ， 这 就 表 
示 这 个 库 起 作用 了 。 

如 果 试 着 将 styleName 属性 指向 不 存在 的 类 名 ， 如 下 所 示 : 


Gonst: Batton (SR ( 
<button styleName="buttonl">Click me!</button> 


) 
浏览 絮 的 控制 台 会 抛 出 以 下 错误 : 

















Uncaught Error: "buttonl" CSS module is undefined. 


当代 码 库 增 大 并 且 多 名 开发 人 员 同 时 开发 不 同 组 件 和 样式 时 ， 这 一 点 特别 有 用 。 











7.5 Styled Component 











这 个 库 的 前 景 非常 广阔 ， 它 考虑 到 了 其 他 组 件 样式 库 遇 到 的 所 有 问题 。 


CSS in JavaScript 的 开发 模式 已 经 有 很 多 不 同 的 实现 方式 ， 我 们 也 尝试 了 许多 解决 方案 ， 现 
在 需要 取 各 家 之 长 ， 并 在 它们 的 基础 上 总 结 出 更 好 的 方案 。 





JavaScript 社区 的 著名 开发 者 Glenn Maddern 和 Max Stoiberg 设计 并 开发 了 Styled Component 库 。 


它 用 现代 手段 解决 组 件 样 式 问题 , 并 在 React 中 运用 了 ES2015 的 最 新 特性 和 其 他 高 级 技巧 ， 
实现 了 完善 的 样式 方案 。 


接 下 来 我 们 要 用 Styled Component 创建 和 之 前 一 样 的 按钮 ,并 检查 我 们 想 要 的 各 种 CSS 特性 
能 否 使 用 ( 如 伪 类 和 媒体 查询 )。 


首先 ， 执 行 以 下 命令 来 安装 它 : 
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npm install --save styled-components 
安装 完成 后 ， 将 它 导 入 组 件 文件 中 : 
import styled from 'styled-components' 


这 样 就 可 以 用 样式 化 函数 创建 任何 元 素 , 形式 如 styled.elementName, 其 中 elementNam 
可 以 是 aiv、 按 钮 或 者 任何 有 效 的 其 他 DOM 元 素 。 


接着 为 将 要 创建 的 元 素 定义 样式 。 为 此 ， 我 们 需要 用 到 ES2015 的 标签 模板 字面 量 特性 ， 它 
可 以 向 函数 传递 未 经 插值 的 模板 字符 


这 意味 着 函数 可 以 接收 包括 所 有 JavaScript 表达 式 的 真正 模板 , 这 使 得 该 库 可 以 用 JavaScript 
的 全 部 能 力 为 元 素 添加 样式 。 


我 们 来 创建 带 有 基础 样式 的 简单 按钮 : 


const Button = styled.button 
backgroundColor: #f£ff0000; 
width: 320px; 
padding: 20px; 
borderRadius: 5px; 
border: none; 
outline: none; 




















Ud 


O 























这 种 看 似 奇怪 的 语法 会 返回 普通 的 React 组 件 Button， 它 泻 染 了 一 个 按钮 元 素 ， 并 加 上 了 
模板 中 定义 的 样式 。 先 创建 唯一 的 类 和 名， 再 将 它 加 到 元 素 上 ,最 后 向 页 面 文档 头 部 注入 相应 的 样 


泻 染 的 组 件 如 下 所 示 : 





























<button class="kYvFOg">Click me!</button> 
页 面 上 添加 的 样式 如 下 所 示 : 


.kYvFOg { 
background-color: #ff0000; 
width: 320px; 
padding: 20px; 
border-radius: 5px; 
border: none; 
outline: none; 


} 


Styled Component 库 的 优点 在 于 支持 几乎 所 有 的 CSS 特性 , 因此 它 对 真实 应 用 来 说 是 一 个 很 
好 的 备 选 方 案 。 


比如 ， 它 支持 SASS 风格 的 伪 类 语法 : 
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const Button = styled.button. 
background-color: #ff0000; 
width: 320px; 
padding: 20px; 
border-radius: 5px; 
border: none; 
outline: none; 
&:hover { 
COLOr: fff> 
lj 


&:active { 
position: relative; 
tO. 2 
} 
它 也 支持 媒体 查询 : 


const Button = styled.button. 
background-color: #ff0000; 
width: 320px; 
padding: 20px; 
border-radius: 5px; 
border: none; 
outline: none; 
&:hover { 
Color: #fff; 
} 


Ea 


:active { 
position: relative; 
tops 20 
} 
@media (max-width: 480px) { 
width: 160px; 
} 





我 们 的 项 目 还 能 用 到 这 个 库 的 很 多 其 他 特性 。 
举例 来 说 , 创建 按钮 组 件 后 , 可 以 很 方便 地 覆盖 其 样式 , 并 设置 不 同属 性 来 多 次 复 用 该 组 件 。 
还 可 以 在 模板 内 根据 组 件 所 接收 的 props 相应 地 改变 样式 。 


这 个 库 的 另 一 项 绝 佳 特性 是 主题 。 将 组 件 封 装 在 ThemeProvider 组 件 中 ， 可 以 为 组 件 树 注入 
主题 属性 ， 当 要 和 其 他 组 件 共享 一 部 分 样式 ， 剩 下 部 分 取决 于 当前 选中 主题 时 ， 创 建 UI 会 变 得 
非常 方便 。 


























7.6 小 结 




















本 章 探 讨 了 许多 有 趣 的 话题 。 我 们 一 开始 介绍 了 大 型 CSS 代码 库存 在 的 问题 , 尤其 是 Facebook 
开发 人 员 编写 CSS 时 所 遇见 的 那些 问题 。 
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我 们 学 习 了 React 行 内 样式 的 工作 原理 ， 以 及 将 样式 放 入 组 件 的 原因 。 同 时 我 们 也 探究 了 行 
内 样式 的 局 限 性 。 

接着 我 们 提 到 了 Radium， 这 个 库 解决 了 行内 样式 的 主要 问题 ， 使 我 们 以 CSS in JavaScript 
模式 编写 样式 时 能 够 定义 清晰 的 接口 。 有些 人 认为 行内 样式 方案 很 糟糕 , 为 此 我 们 又 探讨 了 CSS 
模块 的 领域 ,并 从 零 搭建 了 一 个 简单 项 目 。 

将 CSS 文件 导入 组 件 使 得 依赖 关系 更 加 清晰 ， 另 外 局 部 作用 域 的 类 名 也 避免 了 样式 冲突 。 
我 们 还 见识 了 CSS 模块 composes 的 强大 之 处 ， 并 学 习 了 如 何 用 它 和 原子 级 CSS 搭配 创建 快速 
原型 框架 。 

最 后 , 我 们 稍微 了 解 了 一 下 Styled Component 库 , 这 个 前 景 广阔 的 库 将 完全 改变 组 件 样式 的 
编写 方式 。 












































第 8 章 


服务 端 泻 染 的 乐趣 与 区 处 














构建 React 应 用 的 下 一 步 是 学 习 服务 端 泻 染 的 原理 及 益处 。 通 用 应 用 更 有 利于 搜索 引擎 优化 
(search engine optimization，SEO )， 而 且 能 促使 前 后 端 共 享 知 识 。 


它们 还 能 显著 提升 Web 应 用 的 感知 速度 ， 这 往往 有 助 于 提升 用 户 转化 率 。 然 而 ， 为 React 
应 用 启用 服务 端 泻 染 也 是 有 代价 的 ， 应 该 仔细 考虑 是 否 真 的 需要 进行 。 


本 章 将 介绍 如 何 搭建 服务 端 泻 染 应 用 。 阅 读 完 相关 内 容 后 ， 你 将 掌握 通用 应 用 的 构建 方法 ， 
并 理解 这 项 技术 的 优 缺 点 。 


本 章 包 含 如 下 内 容 。 


口 通用 应 用 是 什么 。 

口 启用 服务 端 泻 染 的 理由 。 

口 用 React 创 建 简单 的 静态 服务 端 演 染 应 用 。 

口 了解 服务 端 泻 染 的 数据 获取 方式 ， 并 理解 脱离 和 注 回 等 概念 :。 
口 用 Zeit 开发 的 Nextjs 可 以 轻松 创建 能 同时 在 服务 端 和 客户 端 运行 的 React 应 用 。 










































































8.1 通用 应 用 
提 到 JavaScript Web 应 用 ， 我 们 往往 会 想到 在 浏览 器 中 运行 的 客户 端 代 码 。 


这 类 应 用 往往 通过 服务 端 返回 带 有 <script> 标 签 的 空 HTML 页 面 进行 加 载 。 加 载 完 毕 后 ， 
应 用 会 操作 浏览 器 中 的 DOM 来 显示 UI, 并 与 用 户 交 互 。 这 种 模式 在 近 几 年 比较 流行 , 而 且 以 后 
大 多 数 应 用 仍然 会 采用 这 样 的 方式 。 


到 目前 为 止 ， 本 书 介绍 了 React 组 件 为 应 用 开发 带 来 的 便利 ， 以 及 它们 在 浏览 需 中 的 工作 原 
理 。 我 们 还 没 见 识 到 React 如 何在 服务 端 浑 染 相同 的 组 件 ， 这 个 强大 的 特性 称 作 服务 端 泻 染 


( server-side rendering，SSR )。 
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在 开始 介绍 细节 前 , 我 们 先 试 着 理解 开发 同时 在 服务 端 和 客户 端 泻 染 的 应 用 是 什么 意思 。 多 
年 以 来 ， 我 们 一 直 都 是 为 服务 端 和 客户 端 分 别 开 发 不 同 的 应 用 ， 比 如 ， 服 务 端 用 Django 应 用 泻 
染 视 图 ， 客 户 端 则 运行 Backbone 或 jQuery 这 类 JavaScript 框架 。 这 些 相 互 独立 的 应 用 往往 需要 
两 支 掌握 不 同 技术 栈 的 开发 团队 来 维护 。 如 果 服 务 端 演 染 完成 的 页 面 需 要 和 客户 端 应 用 共享 数 
据 ， 只 能 在 <script> 标 签 中 注入 变量 。 不 同 的 语言 和 平台 导致 应 用 无 法 在 两 端 间 共 享 模型 或 视 
图 这 类 通用 信息 。 

自 2009 年 Node.js 发 布 后 ， 得 益 于 Express 这 类 Web 应 用 框架 的 出 现 ，JavaScript 在 服务 端 
获得 了 大 量 关注 和 普及 。 

两 端 使 用 同一 种 语言 不 但 有 利于 开发 人 员 复 用 已 有 的 知识 , 而 且 服 务 端 与 客户 端 之 间 也 有 了 
更 多 共享 代码 的 途径 。 

以 React 为 例 ， 同 构 Web 应 用 这 一 概念 在 JavaScript 社区 内 越 来 越 流 行 。 

同 构 应 用 就 是 指 应 用 在 服务 端 和 客户 端 看 起 来 一 模 一 样 。 

实际 上 ， 同 一 种 语言 开发 两 种 应 用 意味 着 大 部 分 逻辑 都 能 共享 ， 这 带 来 了 很 多 机 会 。 代 码 库 
分 析 将 会 更 简单 ， 同 时 也 避免 了 不 必要 的 代码 重复 。 

React 促使 这 个 概念 更 进一步 ， 它 提供 的 API 可 以 非常 简单 地 在 服务 端 泻 染 组 件 ， 并 直观 应 
用 一 切 所 需 的 逻辑 使 页 面 在 浏览 器 中 可 交互 ( 如 事件 处 理 器 )。 

同 构 一 词 并 不 符合 这 种 场景 ， 因 为 就 React 而 言 ，( 在 两 端 运行 的 ) 应 用 是 完全 一 样 的 ， 
此 React Router 的 创造 者 之 一 Michael Jackson 提出 了 更 符合 这 种 模式 的 命名 : 通用 。 

通用 应 用 是 指 应 用 的 代码 可 以 同时 用 于 服务 端 和 客户 端 。 


本 章 将 介绍 为 何 应 该 考虑 开发 通用 应 用 ， 以 及 如 何 轻松 地 在 服务 端 泻 染 React 组 件 。 










































































8.2 ”使 用 服务 端 泻 染 的 原因 


服务 端 泻 染 是 一 项 很 棒 的 特性 , 但 不 能 为 了 用 它 而 用 它 ， 而 应 该 有 真正 充分 的 使 用 理由 。 在 
本 市 中 ,我 们 将 探究 服务 端 演 染 如 何 帮 助 提升 应 用 性 能 ， 以 及 它 能 为 我 们 解决 哪些 问题 。 
































8.2.1 SEO 
在 服务 端 泻 染 应 用 的 一 个 主要 原因 就 是 SEO。 


实际 上 , 如 果 为 主流 搜索 引擎 的 怜 虫 提供 空 过 HTML, 那么 它们 将 无 法 从 中 解析 出 任何 有 意 
义 的 信息 。 
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如 今 ，Google 的 爬虫 似乎 能 执行 JavaScript 代码 , 但 仍然 有 很 多 限制 , 而 SEO 往往 对 我 们 的 
业务 起 关键 作用 。 


多 年 来 ,我 们 一 直 习 惯 于 编写 两 个 应 用 : 一 个 在 服务 端 泻 染 , 供 候 虫 解析 ; 另 一 个 在 客户 端 
运行 ， 供 用 户 使 用 。 


之 所 以 这 样 做 , 是 因为 服务 端 泻 染 的 应 用 无 法 满足 用 户 期 待 的 交互 水 准 , 同时 客户 端 应 用 无 
法 被 搜索 引擎 索引 。 


维护 和 支持 两 个 应 用 的 难度 很 大 ， 这 导致 代码 库 不 够 灵活 ， 而 且 很 难 修改 。 


垃 运 的 是 ， 有 了 React 后 就 可 以 在 服务 端 泻 染 组 件 了 。 这 样 一 来 ， 把 虫 就 能 轻易 理解 并 索引 
我 们 提供 的 应 用 内 容 。 

这 不 仅 有 利于 SEO ， 也 便于 我 们 使 用 社交 分 享 服务 。 实 际 上 ， 当 在 Facebook 和 Twitter 这 类 
平台 分 享 页 面 时 ， 它 们 允许 我 们 定义 分 享 出 去 的 信息 片段 内 容 。 

举例 来 说 ， 可 以 通过 Open Graph 协议 告诉 Facebook， 我 们 希望 在 发 布 社交 消息 时 显示 某 个 
特定 页 面 上 的 某 张 图 ， 并 为 这 条 消息 指定 特定 标题 。 

纯 客 户 端 应 用 几乎 无 法 实现 这 个 需求 , 因为 社交 引擎 从 页 面 解 析 信息 时 用 的 是 服务 端 返回 的 
文档 标记 。 

如 果 服 务 端 对 所 有 URL 都 返回 空 帝 HTML ， 那 么 在 社交 网 络 上 分 享 页 面 时 ，Web 应 用 的 消 
息 片 段 也 是 空 的 ， 这 将 严重 影响 应 用 的 推广 。 































































































8.2.2 通用 代码 库 


我 们 没有 太 多 可 供 选 择 的 客户 端 技术 ， 只 能 用 JavaScript 编写 应 用 。 一 些 语言 可 以 在 构建 过 
程 中 转换 为 JavaScript， 但 本 质 上 还 是 一 样 。 


对 于 可 维护 性 和 跨 公司 知识 共享 来 说 ， 在 服务 端 和 客户 端 使 用 同一 种 语言 很 有 好 处 。 


在 客户 端 和 服务 端 共享 逻辑 后 ， 变 更 操作 会 变 得 更 简单 ， 不必 再 重复 工作 ,错误 和 问题 也 大 
大 减少 。 


比 起 更 新 两 份 应 用 代码 ， 维 护 单个 代码 库 的 工作 量 要 少 得 多 。 
考虑 在 服务 端 引 入 JavaScript 的 另 一 个 理由 是 ， 前 后 端 开 发 人 员 可 以 共享 知识 。 
两 端 复 用 代码 能 够 使 合作 变 得 更 加 方便 ， 整 个 团队 采用 同 种 语言 也 有 利于 快速 决策 和 修改 。 
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8.2.3 ”性 能 更 强 


客户 端 应 用 深 受 我 们 喜爱 , 因为 它们 反应 迅速 而 且 具 备 响 应 式 特性 。 然而, 它们 的 问题 在 于 ， 
用 户 操作 应 用 前 ， 需 要 加 载 并 运行 文件 包 。 


如 果 用 户 使 用 笔记 本 电脑 或 者 台式 机 , 并 且 网 速 很 快 ,那么 这 不 算 什么 问题 。 然 而 ， 如 果 在 
移动 设备 上 通过 3G 网 络 加 载 超大 的 JavaScript 文件 包 ， 那 么 用 户 要 等 待 一 小 段 时 间 才 能 操作 应 
用 。 这 不 仅 有 损 整 体 的 用 户 体 验 ,， 也 会 影响 用 户 转化 率 。 主 流 电 商 网 站 已 经 证 实 ， 页面 加 载 时 间 
仅 增 加 几 毫 秒 就 会 对 营 收 造成 巨大 冲击 。 

举例 来 说 ， 如 果 服 务 端 托管 的 应 用 只 有 空 的 HTML 页 面 和 <script> 标 签 ,， 并且 在 用 户 可 以 
点 击 页 面前 只 显示 加 载 动 画 ， 那 么 网 站 的 感知 速度 将 会 受到 严重 影响 。 

相反 ,如果 在 服务 端 泻 染 网 站 , 用户 一 访问 页 面 就 能 看 到 部 分 内 容 , 那么 他 们 留 下 来 的 可 能 
性 会 更 高 ,尽管 他 们 仍然 需要 等 待 同 样 久 的 时 间 才 能 进行 实际 操作 , 因为 不 管 有 没有 服务 端 泻 染 ， 
都 需要 加 载 客 户 端 文件 包 。 

可 以 用 服务 端 泻 染 极 大 地 提升 感知 性 能 , 因为 我 们 可 以 在 服务 端 输出 组 件 并 直接 为 用 户 返回 


一 些 信息 o 

































































8.2.4 不 要 低估 复杂 度 


显然 ， 尽 管 React 提供 了 简单 的 API 用 于 在 服务 端 泻 染 组 件 ， 但 创建 通用 应 用 是 有 代价 的 。 
因此 ， 即 使 有 了 上 述 理由 ， 在 启用 前 也 应 该 充分 考虑 并 弄 清 团队 是 否 准 备 好 支持 和 维护 通用 应 用 。 


我 们 将 在 后 面 几 节 中 了 解 到 ， 创 建 服务 端 泻 染 的 应 用 实际 上 要 做 的 不 只 是 泻 染 组 件 。 


我 们 要 搭建 和 维护 带 有 路 由 和 逻辑 的 服务 器 、 管 理 服 务 端 数据 流 等 。 如 果 有 可 能 ,还 要 缓存 
服务 器 内 容 ， 以 便 更 快 地 输出 页 面 。 除 此 之 外 ， 维 护 功 能 完整 的 通用 应 用 还 有 许多 其 他 任务 要 
完成 。 

出 于 以 上 原因 , 我 的 建议 是 先 开发 客户 端 版 本 ， 只 有 当 Web 应 用 能 良好 地 在 服务 端 运行 时 ， 
才 应 该 启用 服务 端 演 染 来 改善 体验 。 

只 有 真正 需要 时 才 应 该 启用 服务 端 泻 染 。 比 如 ， 需 要 SEO 或 者 定制 社交 分 享 信息 时 ， 可 以 
考虑 使 用 服务 端 演 染 。 

如 果 发 现 加 载 整个 应 用 耗 时 很 入 , 而 你 已 经 采取 了 一 切 优化 手段 (下 一 音 将 详细 讨论 优化 这 
一 话题 )， 那 么 可 以 考虑 用 服务 端 泻 染 提升 感知 速度 ， 以 便 为 用 户 提供 更 好 的 体验 。 


Facebook 的 工程 师 Christopher Pojer 曾 在 Twitter 上 提 过 ， 他 们 为 Instagram 启用 服务 端 泻 染 
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只 是 为 了 SEO， 因为 对 于 Instagram 这 类 拥有 大 量 动态 内 容 的 网 站 来 说 ， 服 务 端 泻 染 在 提升 感知 
速度 方面 没什么 用 。 
8.3 基础 示例 

我 们 将 创建 一 个 非常 简单 的 服务 端 应 用 ， 通 过 它 来 了 解构 建 通 用 应 用 的 基本 步骤 。 


我 们 有 意 精简 了 这 个 构建 示例 , 因为 本 节 的 目的 是 展示 服务 端 泻 染 的 工作 原理 , 而 不 是 提供 
详细 的 解决 方案 或 代码 模板 。 即便 如 此 , 你 仍然 可 以 在 开发 真正 的 应 用 时 将 该 示例 应 用 作为 基础 。 






































器 ), 并 且 对 Node.js 有 基本 了 解 。 即 使 从 未 接触 过 Node.js 应 用 ，JavaScript 开发 
人 员 也 应 该 能 够 轻松 理解 本 节 内 容 。 


示例 应 用 将 包含 以 下 两 个 部 分 。 


i 本 节 假 设 你 熟悉 与 JavaScript 构建 工具 相关 的 所 有 概念 (如 Webpack 及 其 加 载 








口 服务 端 我 们 将 用 Express 搭建 基础 的 Web 服务 器 ， 它 负责 托管 服务 端 演 染 的 React 应 
用 的 HTML 页 面 。 
口 客户 端 : 我 们 将 照常 用 react-don 演 染 应 用 。 














应 用 两 端的 代码 都 会 用 Babel 进行 转译 , 运行 前 还 会 用 Webpack 打包 ， 这样 我 们 就 能 充分 利 
用 ES2015 的 能 力 ， 并 在 Node.js 和 浏览 器 环境 下 使 用 模块 。 


首先 ， 进 入 一 个 空 文件 来， 执行 以 下 命令 来 创建 新 的 应 用 包 : 
npm init 


生成 package.json 文件 后 ， 安 装 依赖 。 需 要 先 安装 Webpack: 








npm install --save-dev webpack 


接着 安装 Babel 的 加 载 器 ， 以 及 用 React 和 JSX 编写 ES2015 应 用 时 所 需要 的 预 设 配置 : 

















npm install --save-dev babel-loader babel-core babel-preset-es2015 babel-preset-react 


创建 服务 端 打包 文件 还 需要 一 项 依赖 。Webpack 允许 我 们 定义 一 系列 外 部 依赖 ， 即 不 需要 将 
这 些 依赖 加 入 打包 文件 。 在 构建 服务 端 应 用 时 ,实际 上 不 需要 添加 开发 时 用 到 的 所 有 闻 点 包 ; 我 
们 只 想 打包 服务 端 代 码 。 有 一 个 包 可 以 帮助 我 们 做 到 这 一 点 , 将 它 用 到 Webpack 配置 的 外 部 入 口 
部 分 就 可 以 排除 所 有 模块 : 











npm install --Save-dev webpack-node-externals 


非常 好 ， 现 在 可 以 在 package.json 的 脚本 部 分 添加 一 条 入 口 命令 ， 然 后 在 终端 中 简单 地 执行 
builg 命令 即 可 : 
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en a ol 
"build": "webpack" 
二 





然后 创建 配置 文件 webpack.config.js， 它 负责 告诉 Webpack 如 何 打 包 文 件 。 








先导 入 设置 外 部 节点 依赖 的 库 。 另 外 还 要 定义 客户 端 和 服务 端 都 要 用 到 的 Babel 加 载 器 的 配置 : 





const nodeExternals = require('webpack-node-externals') 


const loaders = [{ 
test: /\.js$/, 
exclude: /(node_ modules|bower_components)/, 


loader: 'babel', 
query: { 
presets: ['es2015', 'react'], 
}] 


我 们 在 第 7 章 中 学 习 过 如 何 从 配置 文件 中 导出 配置 对 象 。Webpack 提供 了 一 项 很 棒 的 特性 ， 
这 个 特性 允许 我 们 导出 配置 对 象 数组 ， 这 样 就 可 以 在 同一 个 文件 中 定义 客户 端 和 服务 端的 配置 ， 
一 步 到 位 地 使 用 它们 。 

















我 们 应 该 很 熟悉 客户 端 配置 了 : 





const client = { 
entry: './src/client.js', 
oie. 六 
path: ",/dist/public’, 


filename: 'bundle.js', 


}, 


module: { loaders }, 


} 





我 们 告诉 Webpack， 客 户 端 应 用 的 源 代码 位 于 src 文件 夹 ， 并 指定 在 dist 文件 夹 中 生成 打包 
文件 。 


接着 , 将 刚刚 创建 的 babel-1loader 的 配置 对 象 设置 给 模块 部 分 的 loaders 
又 非常 简单 。 











性 。 这 个 步 


| 





服务 端 配置 稍微 有 些 不 同 ， 但 你 应 该 能 轻松 地 掌握 并 理解 : 





const server = { 
entry: './src/server.js', 
output: 4 
path: LS 


filename: 'server.js', 
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} 
module: { loaders }, 
target: 'node', 


externals: [nodeExternals()], 


} 
如 你 所 见 ， 入 口 、 输 出 以 及 模块 部 分 基本 一 样 ， 只 不 过 文件 名 有 些 区 别 。 


服务 端 配置 中 新 增 了 target 部 分 , 我 们 指定 其 值 为 node, 以 此 告诉 Webpack 忽略 Node.js 
的 所 有 内 置 系统 包 , 如 fs。 另 外, externals 部 分 用 之 前 导入 的 库 告诉 Webpack 忽略 这 些 依赖 。 


最 后 ， 还 需要 以 数组 的 形式 导出 这 两 个 配置 对 象 











module.exports = [client，sexver] 


配置 完毕 。 现 在 可 以 开始 编写 代码 了 ， 先 从 我 们 更 熟悉 的 React 应 用 入 手 。 
创建 src 文件 来， 并 在 其 中 创建 app.js 文件 。 
app.js 包含 以 下 内 容 : 








import React from 'react' 

const App = () => <div>Hello React</div> 

export default App 

代码 很 简单 : 导入 React， 创建 泻 染 出 Hello React 消息 的 App 组 件 ， 最 后 导出 该 组 件 。 


现在 创建 clientjs， 它 负责 在 DOM 中 泻 染 App 组 件 : 








import React from 'react' 
import ReactDOM from 'react-dom' 
import App from './app' 


ReactDOM.render (<App />, document .getElementById('app')) 


当然 ， 我 们 很 熟悉 这 一 步 。 导 入 React、ReactDOM 以 及 上 一 步 中 创建 的 App 组 件 ， 然 后 用 
ReactDOM 在 ID 为 app 的 DOM 元 素 内 泻 染 该 组 件 。 


接 下 来 开始 实现 服务 端 部 分 。 
首先 , 创建 ttmplatejs 文件 ， 用 它 导出 的 函数 返回 页 面 标记 ,再 由 服务 占 将 该 标记 发 送 给 浏 


览 锅 : 





export default body => . 
<!DOCTYPE html> 
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<html> 
<head> 
<meta charset="UTF-8"> 
</head> 
<body> 
<div id="app">$ {body}</div> 
<script src="/bundle.js"></script> 
</body> 
</html> “ 


这 上段 代码 很 简单 : 函数 接受 body 参数 (后面 会 介绍 这 个 参数 包含 React 应 用 ), 并 返回 页 面 
结构 。 

值得 一 提 的 是 ， 即 使 应 用 在 服务 端 渲染 ， 客 户 端 也 需要 加 载 文件 包 。 其 实 ， 服务 端 泻 染 只 是 
React 泻 染 工作 的 一 半 。 我 们 仍然 想 要 一 个 客户 端 应 用 ， 以 便 使 用 浏览 器 的 所 有 特性 ， 比 如 事件 
外 理 器 Le 


现在 是 时 候 创 建 serverjs 了 ， 它 的 依赖 更 多 ， 因 此 值得 详细 探究 一 番 : 











import express from 'express' 

import React from 'react' 

import ReactDOM from 'react-dom/server' 
import App from './app' 

import template from './template' 


首先 导入 express， 它 可 以 很 简单 地 创建 带路 由 的 Web 服务 器 ， 也 可 以 托管 静态 文件 。 


接着 导入 React、ReactDOM 以 及 需要 泻 染 的 App 组 件 。 注 意 ReactDOM 导入 语句 中 的 
/server 路 径 。 最 后 ， 导 入 刚刚 定义 的 模板 。 


现在 可 以 创建 Express 应 用 了 : 








const app = express() 


告诉 应 用 静态 资源 的 存储 路 径 : 

















app.use (express.static('dist/public')) 
你 可 能 已 经 注意 到 了 ， 这 里 的 路 径 就 是 Webpack 客户 端 配 置 中 输出 打包 文件 的 目标 路 径 。 
接 下 来 就 是 用 React 进行 服务 端 演 染 的 逻辑 部 分 : 














const body ReactDOM.renderToString (<App />) 
const html template (body) 
res.send (html) 


} 


这 里 告诉 Express， 我 们 想 要 监听 路 由 /， 当 客户 端 访问 这 条 路 由 时 , 用 ReactDOM 库 将 App 
组 件 泻 染 成 字符 串 。 此 处 体现 了 React 的 服务 端 泻 染 的 神奇 和 简约 。 


BQet("Y (reG, Fes) = 
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renderToString 方法 返回 App 组 件 生成 的 DOM 元 素 的 字符 串 形式 , 如 果 使 用 ReactDOM 
的 render 方法 ， 那 么 它 会 在 DOM 中 泻 染 出 一 模 一 样 的 树 状 结构 。 


body 变量 的 值 如 下 所 示 : 


<div data-reactroot="" data-reactid="1" data-react- 
checksum="982061917">Hello React</div> 


如 你 所 见 , pody 的 值 表示 App 组 件 的 rengder 方法 中 定义 的 内 容 , 只 不 过 多 出 来 几 个 aata 
届 性 ，React 要 在 客户 端 用 这 些 属 性 将 应 用 附加 到 服务 端 泻 染 的 字符 串 中 。 

















现在 我 们 有 了 应 用 的 服务 端 演 染 形式 ， 可 以 用 template 函数 将 它 插入 HTML 模板 ， 并 通 
过 Express 响应 返回 给 浏览 妖 。 














最 后 ， 启 动 Express 应 用 : 

app.listen(3000, () => { 
console.log('Listening on port 3000') 

} 

wy 少 妆 人 天， 就 准 就 Oo 

只 剩 少数 几 个 步骤 ， 一 切 就 准备 就 绪 了 


第 一 步 ， 定义 npm 的 启动 脚本 ， 用 它 启动 节点 服务 器 : 








veriBte ret 
"build": "webpack", 
"start": "node ./dist/server" 


} 
准备 好 脚本 后 ， 先 执行 以 下 命令 来 构建 应 用 : 
npm run build 


打包 完成 后 ， 再 执行 以 下 命令 ; 





























npm start 
在 浏览 器 中 打开 http://localhost:3000， 并 查看 结果 。 


需要 重点 关注 两 点 。 首 先 ,如 果 使 用 浏览 器 的 查看 网 页 源 代 码 功 能 ,我 们 可 以 看 到 服务 端 返 
回 的 应 用 泻 染 完成 后 的 源 代 码 ， 但 没有 启用 服务 端 泻 染 的 情况 下 是 无 法 查看 的 。 


其 次 ,如 果 在 已 安装 React 搬 件 的 情况 下 打开 开发 者 工具 ,我 们 就 会 看 到 客户 端 也 泻 染 了 App 
组 件 。 


以 下 截图 展示 了 网 页 源 代码 。 
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View-sSource:localhost:3000 x 


[@) localhost:3( 





<meta charset="UTF-8"> 

</head> 

body> 

8 <div id="app"><div data-reactroot="" data-reactid="1" data-react-checksum="982061917">Hello 
React</div></div> 

<script src="/bundle.js"></script> 

</body> 

</html> 


8.4 数据 获取 示例 
上 一 节 中 的 示例 已 经 清楚 解释 了 如 何 搭建 React 通用 应 用 。 
这 非常 简单 明了 ， 而 且 主要 侧重 于 如 何 通过 配置 来 完成 任务 。 


但 真实 的 应 用 需要 加 载 数 据 ， 而 不 仅仅 是 示例 中 的 App 组 件 这 类 静态 React 组 件 。 假 设 我 们 
想 在 服务 端 加 载 Dan Abramov 的 gist， 并 通过 刚刚 创建 的 Express 应 用 返回 列表 数据 。 


我 们 通过 第 5 章 中 的 数据 获取 示例 了 解 了 如 何 用 componentDidMount 触发 数据 加 载 。 这 
种 做 法 并 不 适合 服务 端 ， 因 为 组 件 没 有 挂 载 到 DOM 上 ， 也 就 永远 不 会 触发 这 个 生命 周期 钩子 。 


用 componentWwillMount 这 种 更 早 执 行 的 钧 子 也 行 不 通 ， 因 为 数据 获取 操作 是 异步 的 , 但 
renderToString 不 是 。 因 此 , 我 们 需要 找到 一 种 方法 来 预先 加 载 数据 ， 并 将 它 作 为 props 传递 
给 组 件 。 

我 们 来 看 看 如 何 稍 微 修 改 一 下 上 一 节 中 的 应 用 ,使 其 可 以 在 服务 端 演 染 阶 段 加 载 gist。 


首先 ， 修改 appjs 接收 gist 列表 作为 prop， 然 后 在 render 方法 中 遍历 它 ， 以 显示 每 一 项 的 
描述 : 
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const App = ({ gists }) => ( 
<ul> 
{gists.map(gist => ( 
<11 key={gist.id}>{gist.description}</1i> 
) ) } 
</ULS 


) 


App.propTypes = { 
gists: React.PropTypes.array, 


} 


根据 前 面 学 到 的 概念 ， 我 们 定义 了 一 个 无 状态 函数 式 组 件 ， 它 接收 gists 作为 prop 并 遍历 
元 素来 泻 染 列表 项 。 


现在 我 们 需要 修改 服务 端 代码 ， 以 便 获 取 gists 并 传递 给 组 件 。 


要 想 在 服务 端 使 用 获取 API， 需 要 先 安装 isomorphic-fetch 库 ， 该 
取水 数 。Node.js 和 浏览 器 环境 中 都 能 使 用 它 : 








库 按 照 标准 实现 了 获 


i 





npm install --save isomorphic-fetch 
先 在 serverjs 中 导入 这 个 库 : 

import fetch from 'isomorphic-fetch' 
调用 API 的 代码 如 下 所 示 : 


fetch('https://api.github.com/users/gaearon/gists') 
.then(response => response.json()) 
.then(gists => { 


) ) 
此 处 可 以 在 最 后 一 个 then 方法 内 使 用 gists 变量 。 我 们 的 示例 要 将 它 传递 给 App 组 件 。 
因此 ， 可 以 将 /路 由 的 代码 改写 为 以 下 样子 : 


app.get('/', (req, res) => { 
fetch('https://api.github.com/users/gaearon/gists') 
.then(response => response.json()) 
.then(gists => { 
const body ReactDOM.renderToString (<App gists={gists} />) 
const html template (body) 





res.send (html) 
} 
} 


此 处 先 获取 gists， 然 后 传 给 App 组 件 的 属性 ， 再 将 它 泻 染 成 字符 串 。 


一 旦 App 组 件 完成 泻 染 ， 我 们 就 能 得 到 其 标记 ， 并 用 前 一 节 中 的 template 函数 将 它 返回 
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到 浏览 器 。 


在 控制 台中 执行 以 下 命令 ， 并 在 浏览 器 中 访问 http://localhost:3000。 你 应 该 可 以 看 到 服务 端 





泻 染 的 gists 列表 : 
npm run build && npm start 


为 了 确保 列表 是 Express 应 用 泻 染 的 ， 可 以 访问 : 




















View-source:http://localhost:3000/ 


你 会 看 到 页 面 标记 以 及 gists 的 各 项 描述 。 


一 切 都 很 完美 , 而 且 步 又 很 简单 , 但 如 果 打 开 开 发 者 工具 控制 台 , 我 们 会 看 到 以 下 错误 信息 : 





Cannot read property 'map' of undefined 

















出 现 这 个 错误 的 原因 在 于 , 客户 端 会 再 次 泻 染 App 组 件 , 但 此 时 没有 传递 任何 gists 给 它 。 


这 一 开始 听 起 来 有 些 违反 直觉 ， 因 为 我 们 认为 React 十 分 智能 ， 能 够 在 客户 端 使 用 服务 端 字 
符 串 中 演 染 的 gist 数 据 。 但 事实 并 非 如 此 ， 因 此 我 们 要 寻找 一 种 方法 ,以 便 客户 端 也 能 获取 gist。 


你 可 能 想到 在 客户 端 再 次 执行 获取 。 这样 的 确 可 行 , 但 不 太 理 想 , 因为 最 终 要 触发 两 次 HTTP 



































请 求 : Express 服务 器 一 次 ， 浏 览 器 一 次 。 








仔细 想 想 , 我 们 已 经 在 服务 端 发 起 过 请 求 ， 并 获取 了 所 需 的 一 切 数据 。 在 服务 端 和 客户 端 之 





间 共 享 数据 的 典型 方案 是 ， 从 HTML 标记 中 脱离 数据 ， 再 注 回 浏览 器 。 
这 个 概念 似乎 很 复杂 ， 其 实 不 然 。 现 在 我 们 就 来 看 看 它 实现 起 来 有 多 简单 。 


首先 ， 从 服务 端 取 回 gist 后， 必须 将 它们 注入 模板 。 实 现 这 一 点 需要 稍微 修改 一 下 模板 : 





export default (body, gists) => . 
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
</head> 
<body> 
<div id="app">${body}</div> 
<script>window.gists = S${JSON.stringify (gists)}</script> 
SOriDt STO" /DundLle, je/ SerToC 
</body> 
</html> 


template 函数 现在 接收 两 个 参数 : 应 用 的 body 部 分 和 gists 集合 。 


前 者 插入 ia 为 app 的 元 素 , 后 者 用 于 定义 window 对 象 上 的 全 局 gists 变量 ， 











这 样 我 们 就 
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可 以 在 客户 端 使 用 它 了 。 
在 Express 路 由 代码 中 ， 只 需要 修改 传递 body 生成 模板 的 那 行 代 码 ， 如 下 所 示 : 
const html = template(body, gists) 
最 后 ， 我 们 需要 在 client,js 中 使 用 window 对 象 上 的 gists 属性 ， 这 也 非常 简单 : 
ReactDOM.render!( 
<App gists={window.gists} />, 
document .getElementById('app') 
) 
我 们 直接 读 取 gists 属性 ， 并 将 它们 传递 给 客户 端 泻 染 的 App 组 件 。 


现在 再 次 执行 以 下 命令 : 























npm run build && npm start 


在 浏览 器 窗口 中 打开 http:/localhost:3000， 现 在 不 会 再 出 现 错误 信息 了 ， 而 如 果 用 React 开 
发 者 工具 查看 App 组 件 ， 我 们 就 能 看 到 它 在 客户 端 接收 了 gists 集合 。 








8.5 ”Next.js 
你 已 经 见识 了 React 服务 端 泻 染 的 基本 概念 ,也 可 以 用 刚刚 创建 的 项 目 作 为 真正 应 用 的 基础 。 
然而 , 你 可 能 觉得 模板 代码 太 多 , 还 要 了 解 许多 不 同 工 具 才 能 运行 一 个 简单 的 React 通用 应 用 。 
这 种 感觉 很 普遍 ， 称 为 JavaScript 疲劳 ， 本 书 一 开始 介绍 过 。 


好 在 Facebook 的 开发 人 员 和 React 社 区 中 的 其 他 公司 都 非常 努力 地 改进 开发 体验 , 以 便 开 发 
人 员 的 生活 可 以 更 轻松 。 此 时 ， 你 可 能 已 经 用 过 create -redct—aBp 来 尝试 前 面 几 章 中 的 示例 》 
也 应 该 能 体会 到 它 可 以 非常 方便 地 创建 并 运行 React 应 用 , 且 开 发 人 员 无 须 学 习 大 量 技术 和 工具 。 


现在 的 create-react-app 还 不 支持 服务 端 泻 染 ， 但 Zeit 公司 开发 了 一 款 名 为 Next.js 的 
工具 ， 它 可 以 极其 方便 地 生成 通用 应 用 ， 无 须 关 心 配置 文件 。 此 外 ， 它 还 大 大 减少 了 模板 代码 。 


值得 一 提 的 是 ,抽象 始终 有 利于 快速 构建 应 用 。 但 关键 在 于 ,添加 太 多 层 抽象 前 应 该 理解 内 
部 原理 ， 这 也 正 是 为 何 学 习 Nextjs 之 前 我 们 需要 先 手动 实现 一 遍 。 

我 们 已 经 了 解 了 服务 端 泻 染 的 工作 原理 ， 并 学 会 了 如 何 将 状态 从 服务 端 传 到 客户 端 。 理 解 基 
本 概念 后 ,可 以 选用 一 项 工具 将 复杂 之 处 隐藏 起 来 ,以 便 我 们 只 写 少 量 代码 就 可 以 实现 同样 的 目的 。 


接 下 来 我 们 将 创建 和 刚才 一 样 加 载 Dan Abramov 的 所 有 gist 的 应 用 ， 你 会 看 到 有 了 Nextjs 
之 后 代码 变 得 多 么 简单 清晰 。 
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首先 ， 进 入 
npm init 


然后 安装 Next.js 库 : 











npm install --save next 


现在 项 目 创建 完毕 ， 只 要 添加 一 条 





下 总 各 下 二 六 二 
"dev": 


}, 
非常 完美 ， 现 在 开始 生成 App 组 件 。 
Nextjs 依赖 于 约定 ， 其 中 最 关键 的 一 条 


面 是 index， 


"next" 





导入 依赖 : 


import React from 
import fetch from 


"Teact 


这 里 再 次 导入 了 isomorphic-fetch 
接着 定义 一 个 名 为 App 的 类 


Class App extends React.Component 


条 npm 脚本 就 能 


空 文件 夹 并 创建 一 个 新 项 目 : 





运行 这 个 库 : 

















约定 是 ， 创 建 的 页 面 要 和 浏览 器 URL 匹配 。 黑 





著 认 页 


因此 我 们 创建 一 个 名 为 pages 的 文件 夹 ， 并 在 其 中 创建 index.js 文件 。 


'isomorphic-fetch' 


库 ， 因 为 我 们 想 要 在 服务 端 使 用 获取 函数 。 


它 继承 自 React .Component : 





在 该 类 中 定义 一 个 带 有 static 和 async 关键 词 的 方法 getInitialProps ,在 这 个 方法 中 
告诉 Nextjs 我 们 想 要 在 服务 端 和 客户 端 加 载 什 么 数据 。 库 会 使 该 方法 返回 的 对 象 可 以 被 组 件 作 


为 props 使 用 。 


类 方法 带 有 static 和 async 关键 词 表 示 这 个 方法 可 以 被 类 实例 的 外 部 访问 ， 并 且 
村 ( await 关键 词 为 


待 指 








步 执 行 自身 内 部 的 等 





Pa 


它 会 逐 





这 些 概念 非常 高 级 , 不 在 本 章 的 范畴 之 内 , 如 果 对 它们 感 兴趣 , 你 可 以 查看 ECMAScript 提案 。 
我 们 刚刚 讨论 的 方法 的 具体 实现 如 下 所 示 : 


static async getInitialProps() { 
EONSt Ut ‘https://apigithub:ce 
const response = await fetch(url) 
const gists = await response.json 


return { gists } 


} 
我 们 告诉 该 方法 发 起 获取 请 求 并 等 待 响应 





om/users/gaearon/gists' 


() 


; 接着 将 响应 转换 为 JSON， 


这 个 过 程 会 返回 一 个 
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promise 对 象 。promise 变 成 已 完成 状态 后 ， 就 可 以 返回 包含 gists 属性 的 props 对 象 了 。 
组 件 的 演 染 方法 和 之 前 很 相似 : 








render() { 
return ( 
<ul> 
{this.props.gists.map(gist => ( 
<11 key={gist.id}>{gist.description}</1i> 
) ) } 
</ul> 
) 
} 


不 过 ， 它 要 通过 this .props .gists 访问 数据 ， 因 为 我 们 现在 位 于 类 实例 内 部 。 
最 后 ， 定 义 PropTypes， 创 建 组 件 时 始终 要 记得 这 一 步 : 




















Siete! Keser. proptypes.arrey, 

然后 导出 组 件 : 

export default App 

现在 打开 控制 台 ， 执 行 以 下 命令 : 

npm run dev 

我 们 将 看 到 以 下 输出 : 

> Ready on http://localhost:3000 

在 浏览 器 中 打开 这 个 URL， 就 会 看 到 通用 应 用 已 经 运行 起 来 。 

有 了 Nextjs, 只 要 几 行 代码 , 无 须 任何 配置 就 能 很 便捷 地 搭建 一 个 通用 应 用 , 这 实在 令 人 印 
象 深刻 。 

你 可 能 也 注意 到 了 , 如 果 在 编辑 器 内 修改 应 用 ,不 用 刷新 页 面 就 能 立刻 在 浏览 器 中 查看 结 
这 是 Nextjs 的 另 一 项 特性 热 模块 替换 。 它 在 开发 模式 下 非常 有 用 。 


如 果 喜 欢 本 章 ， 可 前 往 GitHub 为 Nextjs 加 一 颗 星 。 
























































8.6 小结 


服务 端 泻 染 的 旅程 已 经 告 一 段落 。 现 在 你 应 该 学 会 了 如 何 创建 React 服务 端 泻 当 应用， 而 且 
应 该 清楚 地 了 解 它 为 什么 对 你 有 用 。SEO 显然 是 最 主要 的 理由 之 一 , 但 社交 分 享 和 性 能 同样 也 是 
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很 重要 的 因素 。 

你 学 习 了 如 何在 服务 端 加 载 数据 ， 并 从 HTML 模板 中 脱离 数据 ， 以 便 客户 端 应 用 在 浏览 器 
中 运行 时 能 够 访问 数据 。 

最 后 , 你 看 到 了 Nextjs 这 类 工具 如 何 帮助 减少 模板 代码 , 并 隐藏 搭建 React 服务 端 泻 染 应 用 
给 代码 库 造 成 的 复杂 度 。 


下 一 章 将 探讨 与 性 能 相关 的 话题 。 











提升 应 用 性 能 











Web 应 用 的 高 性 能 是 提供 良好 用 户 体验 与 提升 用 户 转化 率 的 关键 。React 通过 不 同 的 技巧 快 


速 演 染 组 件 ， 并 尽量 减少 操作 DOM。 因 为 修改 DOM 的 怕 
非常 关键 。 

但 在 某 些 特定 场景 下 ，React 无 法 优化 运行 过 程 ， 这 前 
用 流畅 运行 。 








能 开销 往往 很 大 ， 所 以 减少 操作 次 数 








要 靠 开 发 人 员 用 一 些 特殊 方案 使 得 应 


在 本 章 中 ， 我们 将 学 习 React 性 能 方面 的 基础 概念 ， 以 及 如 何 使 用 一 些 API 帮助 React 在 不 
损伤 用 户 体验 的 情况 下 最 优 地 更 新 DOM。 另 外 ,我 们 还 会 看 到 一 些 不 利于 应 用 运行 ， 甚 至 会 导 


致 应 用 运行 缓慢 的 常见 错误 。 














通过 本 章 中 的 几 个 简单 示例 , 你 会 接触 到 监控 代码 库 性 能 和 定位 瓶颈 的 工具 。 我 们 还 会 学 习 
为 何不 可 变性 与 Purecomponent 是 构建 高 性 能 React 应 用 的 最 佳 工具 。 


我 们 不 应 该 盲目 地 优化 组 件 ， 本 童 介绍 的 优化 技巧 只 应 该 在 必要 时 使 用 。 








本 章 包含 如 下 内 容 。 














口 如 何 使 用 生产 版 本 的 React 以 便 更 快运 行 。 


口 常用 的 优化 手段 以 及 与 性 能 相关 的 常见 错误 。 
口 不 可 变数 据 的 含义 与 用 法 。 
口 促使 应 用 更 快运 行 的 工具 与 库 。 











9.1 一 致 性 比较 与 key 属性 


大 多 数 情况 下 ，React 默认 已 经 够 快 了 ,我 们 不 需要 多 
多 不 同 技巧 来 优化 组 件 在 屏幕 上 的 浑 染 过 程 。 











口 一 致 性 比较 的 原理 ， 以 及 如 何 使 用 key 属性 帮助 React 更 好 地 工作 。 


口 shouldComponentUpdate 和 PureComponent 能 为 我 们 做 什么 ， 以 及 如 何 使 用 它们 。 


做 什么 来 提升 应 用 性 能 。React 用 了 许 
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当 显示 组 件 时 ，React 会 调用 自己 的 泻 


染 方法 ， 还 会 递归 调用 子 组 件 的 泻 染 方法 。 组 件 的 泻 
染 方法 会 返回 React 元 素 树 ， 然 后 React 根据 它 来 判断 更 新 UI 需 要 执行 哪些 DOM 操作 。 











当 组件 的 状态 发 生变 化 时 ，React 会 再 

















React 元 素 树 进行 比较 。 库 本 身 非常 智能 ， 








次 调用 该 节点 的 泻 染 方法 ， 并 将 演 染 结果 与 之 前 的 








能 够 计算 出 使 屏幕 上 产生 预期 变化 所 需 的 最 小 操作 集 





合 。 这 个 过 程 称 为 一 致 性 比较 ， 并 由 React 透明 地 管理 。 正 因为 这 一 点 ， 我 们 才能 简单 地 声明 式 
描述 某 个 特定 时 刻 的 组 件 样子 ， 并 将 其 余 的 工作 交 给 库 。 


React 尝试 尽 可 能 少 地 操作 DOM， 因 为 直接 操作 文档 对 象 模型 的 性 能 开销 非常 大 。 














然而 ， 比 较 两 棵 元 素 树 并 非 没有 开销 ， 














因此 React 通 过 两 项 设 定 降低 了 其 中 的 复杂 度 : 


口 如 果 两 个 元 素 的 类 型 不 同 ， 则 它们 泻 染 的 树 也 不 同 ; 
口 开发 人 员 可 以 用 key 属性 标记 子 组 件 ， 使 它们 在 不 同 泻 染 过 程 得 以 保留 。 





从 开发 人 员 的 视角 来 看 ,第 二 点 非常 有 趣 ， 因 为 它 提供 了 一 项 工具 来 帮助 React 更 快 地 演 染 


视图 。 





接 下 来 我 们 将 通过 一 个 简单 示例 来 解释 如 何 恰当 用 key 显著 提升 性 能 。 
我 们 从 创建 一 个 简单 组 件 和 一 个 按钮 开始 , 前 者 用 于 展示 项 目 列表 , 后 者 用 于 向 列表 添加 项 


目 并 导致 组 件 重新 泻 染 。 





这 里 创建 了 一 个 类 , 因为 我 们 想 要 在 状态 中 保存 当前 列表 , 并 且 需 要 月 


的 点 击 事件 : 


class List extends React .Component 


























i 





事件 处 理 需 监听 按钮 


在 List 组 件 的 构造 名 中 初始 化 列表 ， 并 绑 定 事 件 处 理 需 : 


constructor(props) { 
super (props) 


this.state = { 
items: ['foo', 'bar'], 


} 


this.handleClick = this.handleClick.bind(this) 


} 


事件 处 理 器 会 在 列表 中 新 增 一 项 ， 并 将 最 终 的 数组 保存 在 状态 中 。 


handleClick() { 
this.setStatel(lt{ 
items: this.state.items.concat( 
} 
} 


ba) 
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最 后 ，render 方法 会 遍历 状态 中 的 items 属性 ， 显示 列表 的 每 个 元 素 ， 同时 声明 button 
元 素 以 及 相应 的 onclick 事件 处 理 器 。 





render() { 
return ( 
<div> 
<ul> 
{this.state.items.map(item => <li>{item}</1i>)} 
</ul> 
<button onClick={this.handleClick}>+</button> 
</div> 
) 
} 


组 件 已 经 就 绕 ， 如 果 将 它 添加 到 应 用 中 (或 者 用 create-react-app 创建 新 应 用 来 尝试 )， 
你 就 能 看 到 屏幕 上 显示 了 foo 和 bar 这 两 项 ， 点 击 + 按 钮 会 在 列表 底部 新 增 baz。 

这 正 是 我 们 想 要 的 结果 ,但 为 了 清楚 地 了 解 React 的 行为 ， 需要 安装 一 个 新 的 工具 来 帮助 我 
们 记录 和 显示 与 性 能 相关 的 信息 。 这 个 工具 是 一 个 React 插件 ， 执 行 以 下 命令 即 可 安装 : 






































npm install --save-dev react-addons-perf 
安装 完成 后 ， 将 它 导 入 前 面 的 List 组 件 : 
import Perf from 'react-addons-perf' 


Perf 对 象 提供 了 一 些 有 用 的 方法 来 监控 React 组件 的 性 能 。 使 用 start () 可 以 开始 记录 数 
据 ， 使 用 stop () 可 以 告诉 插件 我 们 已 经 收集 了 足够 多 的 数据 并 准备 显示 出 来 。 


还 有 很 多 不 同 的 方法 可 以 用 来 显示 浏览 器 控制 台中 收集 到 的 数据 。 其 中 printwasteg 用 处 
最 大 , 它 可 以 打印 出 组 件 执行 泻 染 方法 所 耗费 的 时 间 , 并 返回 上 次 泻 染 过 程 中 的 相同 元 素 。Perf 
插件 还 提供 了 DOM 中 与 React 操 作 相 关 的 一 些 有 用 信息 ,对 应 的 方法 名 为 brintoperations， 
接 下 来 我 们 就 会 用 它 来 验证 至 关 重 要 的 key 属性 如 何 提升 应 用 的 性 能 。 一 旦 组 件 完成 更 新 ， 需 
要 显示 浏览 器 中 的 DOM 操作 的 结果 时 ， 这 个 方法 就 会 被 调用 。 我 们 可 以 简单 地 用 React 提供 的 
两 个 生命 周期 钩子 来 开启 或 关闭 数据 记录 功能 ， 并 显示 结果 。 


我 们 要 用 到 的 第 一 个 方法 是 componentWillUpdate, 组 件 将 要 更 新 和 重演 染 前 会 立刻 触 
发 它 : 















































componentWillUpdate() { 
Perf.start () 
} 


我 们 在 这 个 生命 周期 钩子 内 调用 Perf 插 件 的 start () 方 法 来 开始 监控 性 能 。 一 旦 更 新 完成 ， 
就 在 componentDiqUpdate 中 停止 记录 ， 如 下 所 示 : 
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componentDi 


dUpdate() { 


Perf.stop() 
Perf .printOperations() 


} 





如 你 所 见 ， 此 处 除了 停止 记录 ,还 调用 了 Perf 插件 的 brintoperations 方法 , 这 样 就 能 


看 到 屏幕 上 添加 


baz 元 素 时 React 具体 对 DOM 做 了 什么 操作 。 











如 果 运 行 组 件 代 码 并 点 击 + 按 钮 ， 开 发 者 工具 控制 台 就 会 列 出 具体 操作 的 表格 。 表 格 中 对 我 
们 有 用 的 两 列 是 Operation 和 Payload ， 前 者 显示 "insert child"， 后 者 显示 "{"toIndex":2,， 





"content": "LI"}", 














React 会 判断 出 ， 在 当前 列表 末尾 添加 子 项 这 一 改动 实际 上 要 在 列表 编号 为 2 的 位 置 (第 3 


个 元 素 ) 搬入 新 的 子 元 素 LI。 


























你 可 能 已 经 注意 到 了 ，React 没有 重新 绘制 整个 屏幕 ， 而 是 计算 了 更 新 DOM 所 需 的 最 少 操 
作 数 。 这 种 做 法 非常 巧妙 ， 而 且 能 够 满足 大 多 数 用 例 。 


然而 ，React 








在 一 些 特殊 场景 下 不 够 智能 ， 无 法 判断 更 新 DOM 的 最 优 路 径 ， 因 此 我 们 要 用 














key 属性 来 帮助 它 。 如 果 稍 微 修改 一 下 前 面 的 示例 , 特别 是 事件 处 理 吉 的 部 分 , 不 再 将 baz 加 到 




















列表 末尾 ， 而 是 将 它 插 到 最 前 面 ， 然 后 来 看 看 React 行为 的 缺陷 。 











复制 保存 在 当前 状态 中 的 数组 ,并 用 JavaScript 的 unshift 方法 将 一 个 元 素 插 到 副本 数组 的 
第 一 位 置 。 在 副本 数组 上 进行 操作 的 原因 是 ，unshift 方法 不 会 返回 新 数组 ， 而 是 修改 原 数组 ， 
在 操作 状态 时 应 当 极力 避免 这 一 点 。 新 的 onclick 人 处理 如 代码 如 下 所 示 : 


handleClick() { 
const items = this.state.items.slice!() 


items.uns 























hift('baz') 


this.setStatel(lt{ 


items, 
} 
} 


上 述 代码 复 


如 果 运 行 Li 





判 了 原 数 组 ， 然 后 在 顶部 插入 baz 元 素 ,最 后 将 新 数组 赋值 给 状态 , 这 就 触发 了 

















st 组 件 ， 就 可 以 在 屏幕 上 看 到 最 初 的 列表 项 foo 和 bar， 点 击 + 按 钮 ， 新 的 baz 


元 素 会 成 为 第 一 个 元 素 。 


一 切 都 和 预期 一 样 ， 但 如 果 再 次 查看 浏览 器 开发 者 工具 就 会 发 现 ，React 执行 了 多 次 操作 。 
从 前 面 我 们 最 感 兴趣 的 Operation 和 Payload 这 两 列 可 以 得 出 ，React 进行 了 三 步 改 动 : 



































口 将 列表 第 一 项 的 文本 替换 为 新 值 baz; 
口 将 列表 第 二 项 的 文本 替换 为 之 前 第 一 项 的 值 foo; 
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口 在 编号 为 2 的 位 置 ( 即 列 表 底 部 ) 搬入 新 的 子 元 素 。 


React 没有 直接 在 列表 项 部 添加 新 元 素 并 将 原 有 元 素 向 下 移 ， 而 是 修改 了 原 有 元 素 的 值 并 在 
列表 底部 添加 了 新 元 素 。 


React 这 么 做 的 原因 在 于 , 它 只 是 检查 前 后 两 次 子 元 素 是 否 一 致 , 如 果 发 现 第 一 个 元 素 不 同 ， 
那么 它 会 认为 所 有 列表 项 都 是 新 的 ， 因 此 全 部 修改 。 


这 个 简单 示例 没有 展示 任何 可 见 的 性 能 问题 , 但 如 果 是 包含 上 百 个 元 素 的 真实 应 用 , 那么 问 
题 就 很 严重 了 。 


好 在 React 提供 了 key 属性 这 一 工具 ， 我 们 可 以 用 它 帮 助 React 判断 哪些 元 素 进行 了 修改 ， 
以 及 新 增 或 移 除 了 哪些 元 素 。 


key 的 使 用 很 简单 , 为 列表 中 的 每 一 项 添加 唯一 的 key 属性 即 可 。 此 处 重点 在 于 ，key 属性 
的 值 在 每 次 渲染 过 程 中 不 能 改变 , 因为 React 会 比较 演 染 前 后 的 key 属性 值 ， 从 而 判断 元 素 是 新 
增 的 还 是 已 有 的 。 


举例 来 说 ， 我 们 可 以 修改 List 组 件 的 泻 染 方法 ， 如 下 所 示 : 


render() { 
return ( 
<div> 
<ul> 
{this.state.items.map(item => <11 key={item}>{item}</1i>)} 
i 
<button onClick={this.handleClick}>+</button> 
</div> 
) 
} 


将 每 个 列表 项 的 key 属性 值 设 为 该 项 本 身 ， 然 后 在 浏览 器 中 再 次 运行 组 件 ， 我 们 会 发 现 效 
果 还 是 没有 变化 : 先 显 示 两 个 列表 项 ， 点 击 按钮 后 会 在 顶部 新 增 一 项 。 

然而 ， 如 果 打 开 开 发 者 工具 ， 我 们 会 看 到 Perf 插件 打印 的 信息 和 上 次 不 同 。 

事实 上 ，Operation 显示 刚刚 插入 了 单个 元 素 ， 更 重要 的 是 ，Payload 显示 元 素 放 到 了 编号 为 
0 的 位 置 ， 也 就 是 第 一 位 。 

这 很 巧妙 : 我 们 用 key 帮助 React 判断 出 操作 的 最 少 集合 ， 从 而 提升 组 件 的 泻 染 性 能 。 牢 记 
这 条 简单 规则 ， 就 能 解决 大 量 因为 没有 使 用 key 而 造成 性 能 损耗 的 案例 。 

值得 一 提 的 是 ， 记 住 这 条 规则 很 容易 ， 因 为 每 当 我 们 忘记 添加 key 属性 时 ，React 就 会 在 浏 
览 器 控制 台 给 出 以 下 警告 : 


Each child in an array or iterator should have a unique "key" prop.Check the render 
method of ‘List.. 
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这 条 错误 消息 非常 有 用 ， 因 为 它 告诉 我 们 修改 哪个 组 件 才能 解决 问题 


,如果 你 按照 第 2 章 中 那样 启用 Eslint, 并 开启 eslint-plugin-react 插件 的 jsx-key 
属性 时 给 出 警告 。 





另 儿 
规则 ， 那 么 linter 也 会 在 缺少 key 








9.2 ”优化 手段 
日 Create react- ape 创建 的 还 是 从 头 编写 的 ， 本 书 所 有 示例 中 的 应 用 使 用 








注意 ， 不 管 是 月 
的 都 是 开发 版 的 React。 
开发 版 的 React 对 编码 和 调试 过 程 很 有 帮助 ,因为 它 可 以 提供 解决 各 种 问题 所 需 的 必要 信息 。 
但 这 些 校 验 和 警告 都 会 损耗 性 能 ， 生 产 环境 下 应 当 移 除 。 


因此 ， 应 用 首先 要 优化 的 地 方 就 是 ,构建 打 包 时 要 将 NoDI 
production。Webpack 很 容易 做 到 这 一 点 ， 使 用 DefinePlugin 插件 即 可 ， 如 下 所 示 : 


























E_ENV 环境 变量 设置 为 











new webpack.DefinePlugin({ 
'process.env': { 
NODE_ENV: JSON.stringify('production') 














sg 
为 了 获得 最 优 性 能 ， 
积 , 以 便 应 用 可 以 更 快 加 载 。 要 想 实现 这 一 点 ， 只 要 简单 地 在 Webpack 配置 的 捐 
下 插件 : 
new webpack.optimize.UglifyJsPlugin() 
有 有 些 地 方 运 和 


如 果 启 用 生产 版 本 的 React 后 仍然 发 现 应 月 
组 件 的 演 染 过 程 。 
， 没 有 测试 应 用 性 能 并 弄 清 瓶颈 所 在 前 , 不 应 该 优化 应 用 。 过 早 优化 往往 


} 
不 仅 构 建 打 包 时 需要 启用 生产 环境 标记 ， 还 要 压缩 最 终 代 码 来 减 小 体 
上 件 列表 加 入 以 











很 慢 ， 还 可 以 采取 一 些 技 巧 来 改 








岩 





三 





这 里 重点 要 提 的 是 
会 市 来 不 必要 的 复杂 度 ， 应 该 极力 避免 这 种 情况 。 
React 本 身 已 经 采取 了 一 些 措施 使 应 用 运行 得 更 快 、 更 流畅 ， 因 此 大 部 











另外 还 要 注意 一 点 ， 
分 情况 下 不 需要 我 们 再 多 做 什么 。 
然而 , 这 些 优化 手段 无 法 满足 一 些 特殊 场景 , 我 们 要 帮助 库 尺 量 提供 最 佳 体 验 。 在 这 些 场景 








下 ， 我 们 要 告诉 React 不 要 比较 元 素 树 某 些 部 分 的 一 致 性 。 








是 否 要 更 新 组 件 
或 。 他 们 往往 认为 ， 既 然 React 足够 知 


9.2.1 
比较 器 算法 的 原理 常常 让 许多 开发 人 员 感 到 困惑 
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够 寻找 修改 DOM 的 最 快 路 径 ， 那么 组 件 没有 发 生变 化 就 不 会 触发 演 染 方法 。 但 事实 并 非 如 此 。 


实际 上 ， 为 了 找 出 减少 DOM 操作 的 必要 步 又 ，React 必须 触发 所 有 组 件 的 泻 染 方法 ， 并 比 
较 前 后 两 次 的 结果 。 

如 果 比 较 后 发 现 什么 都 没有 改变 ， 那 么 就 不 修改 DOM， 这 是 理想 情况 。 但 如 果 渔 染 方法 执 
行 了 很 复杂 的 操作 ，React 就 要 耗费 一 些 时 间 才 能 判断 出 不 需要 进行 任何 修改 ， 这 种 情况 就 不 够 
理想 了 。 

很 显然 ， 我 们 希望 组 件 尽 可 能 简单 ， 还 应 该 避免 在 演 染 方法 中 执行 开销 很 大 的 操作 。 然 而 ， 
有 时 不 太 好 掌控 这 一 点 ， 因 此 应 用 就 会 运行 缓慢 ， 尽 管 我 们 从 未 操作 DOM。 


React 无 法 判断 哪个 组 件 不 需要 更 新 ， 但 我 们 可 以 调用 一 个 方法 告诉 它 更 新 组 件 的 时 机 。 

这 个 方法 就 是 shouldCcomponentUpdate， 如 果 它 返回 false， 那 么 在 父 组 件 的 更 新 过 程 
中 ,组件 及 其 全 部 子 元 素 的 泻 染 方法 不 会 被 调用 。 

举例 来 说 ， 为 前 面 创 建 的 列表 示例 添加 以 下 代码 : 


shouldComponentUpdate() { 
return false 


} 

此 时 你 会 发 现 无 论 如 何 点 击 + 按 钮 ， 浏 览 器 中 的 应 用 都 不 会 有 任何 效果 ， 尽 管状 态 确实 发 生 
了 变化 。 这 是 因为 我 们 告诉 React 不 需要 更 新 该 组 件 。 
总 是 返回 false 并 没有 什么 实际 用 处 , 因此 开发 人 员 往 往 会 在 该 方法 中 检查 props 或 者 状态 
是 否 改变 。 


以 List 组 件 为 例 ， 我 们 应 该 检查 items 数组 是 否 改动 过 ， 并 返回 相应 值 。 

shouldComponentUpdate 方法 会 传人 两 个 参数 来 实现 上 述 检查 : 两 者 分 别 是 nextProps 
和 nextState。 

拿 本 例 来 说 ， 我 们 可 以 编写 以 下 代码 : 


shouldComponentUpdate (nextProps, nextState) { 
return this.state.items !== nextState.items 


} 

只 有 items 数组 发 生变 化 时 , 该 方法 才 会 返回 true, 其 他 情况 则 不 会 进行 泻 染 。 举例 来 说 ， 
假设 List 组 件 的 父 组 件 更 新 非常 频繁 ,但 父 组 件 状态 又 不 会 影响 List ,此 时 就 可 以 用 shoula- 
ComponentUpdate 告诉 React 不 要 调用 List 组 件 及 其 子 组 件 的 演 染 方法 。 


检查 所 有 props 和 状态 属性 是 否 变 化 非常 繁琐 枯燥 ， 而 且 有 时 很 难 维护 复杂 的 shouldcom- 
ponentUpaate 方法 实现 ， 尤 其 是 需求 频繁 变动 时 。 
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出 于 以 上 原因 , React 提供 了 一 个 特殊 组 件 供 我 们 继承 使 用 , 它 可 以 浅 比较 所 有 props 和 状态 
属性 。 


它 的 用 法 很 直观 ， 创 建 组 件 类 时 继承 React .PureComponent 来 代替 React .Component 
即 可 。 

要 重点 注意 的 是 , 顾名思义 , 浅 比 较 不 会 检查 对 象 中 骸 套 的 深层 属性 ， 并且 有 时 会 给 出 意外 
结果 。 


浅 比较 和 不 可 变数 据 结构 搭配 使 用 效果 非常 好 ， 本 章 后 面 会 详细 解释 这 点 。 另 外 要 提 一 点 
深度 比较 复杂 对 象 所 需 的 开销 有 时 比 泻 染 方法 本 身 更 大 。 


这 也 是 为 何 只 应 在 必要 时 使 用 Purecemponent ， 而 且 只 能 在 测试 完 性 能 后 ， 弄 清 哪个 组 件 
运行 耗 时 太 长 后 才 可 以 使 用 它 。 















































9.2.2 无 状态 函数 式 组 件 
有 时 让 新 手 觉得 不 合 常理 的 另 一 个 概念 是 ， 无 状态 组 件 实际 上 不 会 带 来 任何 性 能 上 的 提升 。 


我 们 已 经 在 第 3 章 中 了 解 过 ,无 状态 组 件 的 优点 很 多 。 尽 管 它们 可 以 使 应 用 更 加 简洁 、 更 易 
分 析 , 但 (目前 ) 没有 任何 内 部 实现 能 使 它们 更 快运 行 。 


我 们 很 容易 想当然 地 认为 这 类 组 件 演 染 起 来 应 该 更 快 , 因为 它们 没有 实例 、 状 态 和 事件 处 理 
器 ,但 目前 情况 并 非 如 此 。 


或 许 它们 将 来 会 得 到 优化 (取决 于 React 团队 )， 但 现在 其 性 能 甚至 更 差 ， 因 为 我 们 已 经 知 
道 无 法 使 用 shouldcomponentUpdate 方法 ， 也 就 不 能 帮助 React 更 快 地 泻 染 元 素 树 。 

















9.3 ”常用 解决 方案 
我 们 已 经 知道 可 以 用 Purecomponent 告诉 React 泻 染 子 树 的 时 机 。 正 确 使 用 它 就 能 极 大 提 
升 应 用 性 能 。 还 要 重点 强调 的 是 ， 只 有 检查 过 应 用 性 能 并 找到 瓶颈 所 在 后 ， 才 可 以 使 用 它 。 


有 些 情况 较为 复杂 , 继承 Purecomponent 并 不 能 实现 我 们 想 要 的 结果 。 这 往往 是 因为 我 们 
认为 props 或 状态 没有 改变 , 但 实际 上 它们 的 确 变化 了 。 有 时 还 很 难 判断 哪个 prop 导致 了 组 件 重 
新 泻 染 ， 或 者 哪个 组 件 可 以 用 Purecomponent 优化 。 

大 多 数 情 况 下 ， 重 构 组 件 并 正确 使 用 状态 对 于 优化 应 用 有 极 大 帮助 。 


我 们 将 介绍 一 些 常 用 工具 和 解决 方案 来 解决 重演 染 问题 , 并 找 出 哪些 组 件 可 以 进行 优化 。 另 
外 ， 我 们 还 将 学 习 如 何 重 构 复杂 组 件 ， 将 它们 拆 分 成 小 型 组 件 以 获得 更 好 的 性 能 。 
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9.3.1 why-did-you-update 


还 可 以 用 其 他 方法 找 出 不 需要 更 新 的 组 件 。 最 简单 的 方法 就 是 安装 一 个 能 自动 提供 信息 的 第 
三 方 库 。 


首先 ， 在 终端 中 输入 以 下 命令 : 
npm install --save-dev why-did-you-update 


然后 在 React 的 import 语句 后 面 添加 以 下 代码 : 





if (process.env.NODE_ENV !== 'production') { 
const { whyDidYouUpdate } = require('why-did-you-update') 
whyDidYouUpdate (React) 

} 


这 上段 代码 的 基本 含义 是 , 只 在 开发 模式 下 加 载 库 , 并 用 wnyDidYouUpdate 方法 封装 React。 
注意 ， 生 产 环境 中 不 要 启用 这 个 库 。 











现在 我 们 回 到 上 一 节 中 的 List 组 件 示 例 并 对 其 稍 作 修改 ， 然 后 看 看 这 个 库 的 实际 运用 。 
首先 ， 修 改 render 方法 ， 如 下 所 示 : 


render() { 
return ( 
<div> 
<ul> 
{this.state.items.map(item => ( 
<Item key={item} item={item} /> 
) ) } 
</ul> 
<button onClick={this.handleClick}>+</button> 
</div> 
) 
} 


这 里 map 方法 内 部 不 再 演 染 一 个 个 单独 的 列表 项 , 而 是 返回 自 定义 的 Item 组 件 , 我 们 向 该 9 
组 件 传 人 当前 列表 项 数据 ， 并 用 key 属性 告诉 React 哪些 组 件 在 更 新 前 就 已 经 存在 了 。 




















现在 继承 React .Component ， 创 建 item 组 件 : 





class Item extends React.Component 
目前 它 只 实现 了 render 方法 来 负责 List 组 件 的 render 方法 的 职责 : 


render() { 
return ( 
<li>{this.props.item}</1i> 
) 
} 
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在 浏览 器 中 运行 组 件 前 ,可 能 还 想 要 蔡 换 Perf 插件 的 方法 ， 因 为 现在 我 们 更 关心 泻 染 未 变 
组 件 耗费 的 时 间 ， 而 不 是 执行 了 哪些 DOM 操作 : 





componentDigdUpdate() { 
Perf.stop() 
Perf.printWasted() 

} 


非常 好 ! 如 果 此 时 在 浏览 需 中 演 染 组 件 ， 那 么 我 们 就 能 看 到 foo 和 bar 两 项 ， 如 果 点 击 + 按 
钮 ， 开 发 者 工具 控制 台 就 会 出 现 两 条 提示 。 


第 一 条 提示 是 wnyDidYouUpdate 方法 输出 的 ， 它 会 告诉 我 们 可 以 避免 重复 演 染 哪些 组 件 : 











Item.props 
Value did not change. Avoidable re-render! 
before Object {item: "foo"} 
after Object {item: "foo"} 

Item.props 
Value did not change. Avoidable re-render! 
before Object {item: "bar"} 
after Object {item: "bar"} 


尽管 React 没 有 操作 foo 和 bar 的 DOM 节点 ,但 实际 上 还 是 会 用 原来 的 props 调用 这 两 个 组 
件 的 泻 染 方法 ， 这 就 使 得 React 多 做 了 额外 的 工作 。 这 类 信息 用 处 很 大 ， 但 有 时 难以 发 现 。 

上 述 提示 的 下 方 就 是 Perf 插件 的 输出 内 容 ， 该 插件 计算 了 props 未 改变 时 触发 Item 组 件 
的 演 染 方法 所 浪费 的 时 间 。 


如 此 一 来 ,这 个 问题 就 很 好 解决 了 ,将 Item 组 件 继承 语句 中 的 extends React .Component 
改 为 以 下 语句 即 可 : 























class Item extends React.PureComponent 


再 次 打开 浏览 器 并 运行 应 用 ， 此 时 点 击 + 按钮 ， 控制 台 不 会 输出 任何 提示 ,这 就 意味 着 props 
未 改变 时 不 会 泻 染 任何 Item 组 件 。 





























从 感知 性 能 角度 来 看 , 这 个 小 示例 改动 前 后 没有 很 大 差别 , 但 如 果 是 包含 数 百 个 列表 项 的 大 
型 应 用 ,这么 一 点 改动 就 能 带 来 巨大 收益 。 


9.3.2 ”在 泻 染 方法 中 创建 函数 
接 下 来 , 我们 像 开发 真实 应 用 那样 继续 为 List 组 件 添加 特性 ， 看 看 某 些 情况 下 是 否 会 破坏 


PureComponent 的 优势 。 


举例 来 说 ,我 们 要 给 每 个 列表 项 添加 一 个 点 击 事件 处 理 器 ， 当 点 击 某 项 时 ,将 其 值 输出 到 控 
制 台 。 
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以 上 做 法 对 于 真实 应 用 没有 多 大 用 处 , 但 你 可 以 只 花 少量 精力 , 就 轻松 弄 懂 如 何 创建 更 复杂 
的 操作 ， 比 如 用 列表 项 的 数据 显示 新 窗口 。 


添加 上 述 特性 需要 改动 两 处 , 分 别 是 List 组 件 的 render 方法 与 Item 组件 的 render 方法 。 
先 来 修改 前 者 : 


render() { 
return ( 
<div> 
1 
{this.state.items.map(item => ( 
<Item 
key={item} 
item={item} 
onClick={() => console.log(item)} 
/> 
) ) } 
</ul> 
<button onClick={this.handleClick}>+</button> 
</div> 
) 
} 


Item 组 件 新 增 了 onclick prop， 并 为 它 赋值 一 个 函数 ,调用 该 函数 时 会 将 当前 项 的 数据 输 
出 到 控制 台 

为 了 运行 这 个 函数 ，Itenm 组 件 也 要 添加 相应 的 逻辑 ， 只 要 将 onclick prop 赋值 给 <1i> 元 
素 的 onClick 处 理 需 即 可 : 


























render() { 
return ( 
<Ll1i ONnCLICKE (thLe rops ONnCLTLCGK}S 
{this.props.item} 
</1i> 


) 
Es 
这 仍然 是 一 个 纯粹 组 件 ,列表 中 新 增 baz 时 ,我 们 希望 数据 值 没有 变化 的 组 件 不 要 重新 渲染 。 


问题 是 ， 如 果 在 浏览 右 中 运行 组 件 ， 开 发 者 工具 会 输出 一 些 新 的 记录 。 首 先 ，whyDigdYou- 
Update 库 会 告诉 我 们 onclick 函数 始终 不 变 ， 这 或 许可 以 避免 重新 演 染 

















Item.props.onClick 
Value is a function. Possibly avoidable re-render? 
before onClick() { 
return console.log(item); 
} 
after onClick() { 
return console.log(item); 
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} 
Item.props.onClick 
Value is a function. Possibly avoidable re-render? 
before onCclick() { 
return console.log(item); 
} 
after onClick() { 
return console.log(item); 


} 





其 次 ，Perf 插件 会 提醒 我 们 泻 染 List > Item 组 件 浪费 了 一 些 时 间 。 








React 认为 每 次 浑 染 都 传人 了 新 函数 的 原因 是 ， 即 使 函数 实现 保持 不 变 ， 每 次 调用 箭头 函数 
都 会 返回 一 个 全 新 创建 的 函数 。 使 用 React 常常 会 犯 这 个 错 ， 不 过 只 要 稍微 重 构 一 下 组 件 就 能 轻 
松 解决 这 个 问题 。 








遗憾 的 是 ， 因 为 需要 知道 对 数 函 数 由 哪个 子 组 件 所 触发 ， 所 以 不 能 只 在 父 组 件 中 定义 一 次 。 
因此 ， 最 好 的 做 法 似乎 是 在 循环 内 部 创建 它 。 

















实际 上 ， 我 们 要 将 部 分 逻辑 移 到 item 组 件 内 ， 只 有 它 才 知道 哪些 列表 项 被 点 击 了 。 
我 们 来 看 看 继承 自 Purecomponent 的 Item 组 件 的 完整 实现 ， 如 下 所 示 : 
class Item extends React.PureComponent 


在 constructor 方法 中 绑 定 点 击 事件 的 处 理 需 : 





constructor(props) { 
super (props) 


this.handleClick = this.handleClick.bind(this) 
3 


点 击 <1i> 元 素 时 ，nandleClick 方法 会 调用 从 props 接收 到 的 onclick 处 理 器 ， 并 传人 
当前 列表 项 的 数据 。 


handleClick() { 


this.props.onClick (this.props.item) 
} 


然后 在 render 方法 中 使 用 刚刚 创建 的 局 部 事件 处 理 咒 : 


render() { 
return ( 
<li onClick={this.handleClick}> 
{this.props.item} 
</1i> 
) 
} 














最 后 还 要 修改 List 组 件 的 演 染 方法 ,使 其 不 要 在 每 次 演 染 时 返回 新 函数 ， 如 下 所 示 : 
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render() { 
return ( 
<div> 
<ul> 
{this.state.items.map(item => ( 
<Item key={item} item={item} onClick={console.log} /> 
) ) } 
</Ul> 
<button onClick={this.handleClick}>+</button> 
</div> 
) 
} 


如 你 所 见 , 这 里 传递 了 我 们 需要 用 到 的 console.1og 函数 , 子 组 件 会 用 正确 的 参数 调用 它 。 
如 此 一 来 ，List 组 件 内 部 的 函数 实例 始终 保持 不 变 ， 也 就 不 会 触发 任何 重演 染 过 程 。 

如 果 再 重新 运行 一 遍 组 件 , 并 点 击 + 按钮 来 添加 新 项 , List 组 件 会 重新 泻 染 , 但 此 时 没有 浪 
费 额外 时 间 。 

另外 ， 如 果 点 击 列表 中 的 任意 一 项 ， 我 们 也 可 以 看 到 控制 台 输 出 其 值 。 

Dan Abramov 说 过 ， 在 演 染 方法 中 使 用 箭头 函数 (其 至 在 constructor 方法 中 用 bind 绑 
定 this ) 的 做 法 本 身 没什么 问题 ， 只 不 过 实际 使 用 Purecomponent 时 要 小 心 谨慎 ， 确 保 不 会 
引发 不 必要 的 重演 染 。 














9.3.3 ”props 常量 
我 们 来 继续 改进 列表 示例 ， 看 看 增加 新 特性 会 引发 什么 情况 。 
接 下 来 我 们 将 学 习 如 何 避 免 会 导致 Purecomponent 变 得 低 效 的 一 个 常见 错误 用 法 。 


假设 Item 组件 需要 新 增 一 个 prop 来 表示 列表 项 所 能 拥有 的 一 系列 状态 。 实 现 这 个 需求 的 方 
式 很 多 ， 而 我 们 更 关注 如 何 传人 默认 值 。 


修改 List 组 件 的 render 方法 ， 如 下 所 示 : 














render() { 
return ( 
<div> 
<ul> 
{this.state.items.map(item => ( 
<Item 
key={item} 
item={item} 
onClick={console.1og} 
statuses={['open', 'close']} 
/A 
) ) } 
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< 
<button onClick={this.handleClick}>+</button> 
</div> 
) 
} 
上 述 代码 为 每 个 Item 组 件 设 置 了 key 和 item 这 两 个 prop, 两 者 的 值 都 是 当前 列表 项 item。 
Item 组 件 内 部 触发 onclick 事件 时 会 调用 console.1og， 这 里 还 新 增 了 一 个 prop， 用 于 表示 
列表 项 item 可 能 拥有 的 状态 。 


现在 ， 如 果 在 浏览 器 中 泻 染 List 组 件 , foo 和 bar 会 照常 显示 ， 点击 + 按钮 新 增 baz 时 , 我 
们 会 看 到 控制 台 输 出 一 条 新 消息 : 














Item.props.statuses 
Value did not change. Avoidable re-render! 
before ["open", "close"] 
after ["open", "close"] 
Item.props.statuses 
Value did not change. Avoidable re-render! 
before ["open", "close"] 
after ["open", "close"] 


这 条 消息 告诉 我 们 ， 即 使 数组 内 部 的 值 没有 改变 , 但 每 次 演 染 都 会 给 Item 组 件 传人 新 的 数 
组 实例 。 


这 种 行为 背后 的 原因 是 ,所 有 对 象 在 创建 时 都 会 返回 新 的 实例 , 但 即使 包含 相同 的 值 ， 两 个 
新 数组 也 永远 不 会 相等 : 


[] === [] 
false 


控制 台 还 打印 了 一 张 表格 ,以 显示 在 不 需要 操作 DOM 时 ，React 用 未 变化 的 props 泻 染 列表 
项 所 浪费 的 时 间 。 


这 个 问题 的 解决 方法 就 是 只 创建 数组 一 次 ， 每 次 泻 染 都 传人 相同 的 实例 。 
如 下 所 示 : 











const statuses = ['open', 'close'] 
render() { 
return ( 
<div> 
<ul> 

{this.state.items.map(item => ( 
<Item 
key={item} 


item={item} 
onClick={console.1og} 
statuses={statuses} 
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/> 
) ) } 
/LS 
<button onClick={this.handleClick}>+</button> 
</div> 
) 
} 


如 果 再 次 运行 组 件 , 我 们 可 以 看 到 现在 控制 台 没有 输出 任何 消息 。 这 就 表明 新 增 元 素 时 , 列 
表 项 不 会 再 多 余地 重新 泻 染 。 





9.3.4 重 构 与 良好 设计 
接 下 来 我 们 将 学 习 如 何 重 构 已 有 组 件 (或 者 用 更 好 的 思路 重新 设计 组 件 ) 来 提升 应 用 的 性 能 。 


选用 糟糕 的 设计 往往 会 带 来 很 多 问题 。 以 React 为 例 ， 如 果 将 状态 放 在 不 合理 的 位 置 ， 那 么 
组 件 就 可 能 发 生 不 必要 的 演 染 。 












































之 前 提 过 ,如 果 只 是 一 个 组 件 本 身 演 染 多 次 ,这 并 不 算 什么 大 问题 。 只 有 测试 性 能 后 ,发 现 
多 次 演 染 很 长 的 列表 ， 进 而 导致 应 用 啊 应 性 变 差 ， 问 题 才 变 得 严重 起 来 。 


我 们 接 下 来 要 创建 的 组 件 和 之 前 的 很 像 , 它 类 似 于 一 个 待 办 事项 列表 , 还 提供 表单 让 用 户 输 
入 新 事项 。 


和 之 前 一 样 ， 我 们 先 从 基础 版 本 做 起 ， 再 逐步 优化 。 


该 组 件 继承 自 React .Component ， 类 名 为 Todos: 











class Todos extends React.Component 
在 constructor 方法 中 初始 化 状态 并 绑 定 事件 处 理 需 : 


constructor(props) { 
super (props) 


this.state = { 
items: ['foo', 'bar'], 
value: '! 


} 
this.handleChange = this.handleChange.bind(this) 
this.handleClick = this.handleClick.bind(this) 

4 


状态 包括 以 下 两 个 属性 。 











口 items: 具有 一 些 默 认 值 的 待 办 事项 列表 ; 新 事项 也 会 添加 到 该 数组 。 
口 value: 用 户 填写 新 增 事 项 的 输入 框 的 当前 值 。 
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现在 你 应 该 可 以 根据 事件 处 理 器 的 名 称 推断 出 其 功能 。 每 当 用 户 在 表单 中 输入 字符 时 ， 就 会 
触发 handlechange 方法 : 





handleChange({ target }) { 
this.setStatel(lt{ 
value: target .value, 
} 
} 


正如 我 们 在 第 6 章 中 所 学 的 那样 ，onchange 处 理 器 接收 带 有 目标 属性 的 事件 ， 其 中 目标 属 
性 表示 输入 元 素 ， 我 们 将 它 的 值 存储 在 状态 中 ， 以 控制 组 件 。 
用 户 提交 表单 来 新 增 事项 时 会 触发 hnandleclick 方法 : 


handleClick() { 
const items = this.state.items.slice!() 
items.unshift (this.state.value) 




















this.setStatel(lt{ 
items, 
} 
} 


点 击 事件 处 理 器 和 之 前 示例 中 的 很 像 , 只 不 过 现在 它 使 用 了 状态 中 的 值 , 而 不 是 字符 串 常量 ， 
而 且 它 将 值 添加 到 了 副本 数组 的 头 部 。 
后 ,在 r*endaer 方法 中 编写 视图 : 
render() { 
( 


return 
<div> 








<ul> 
{this.state.items.map(item => <11 key={item}>{item}</1i>)} 
</ul> 
<div> 
<input 
type="text" 
value={this.state.value} 
onChange={this.handleChange)} 
/> 
<button onClick={this.handleClick}>+</button> 
</div> 
</div> 


) 


这 里 我 们 声明 了 一 个 无 序列 表 ， 在 其 中 遍历 事项 集合 ， 并 用 <1i > 元素 输出 每 一 项 内 容 。 列 
个 受 控 输入 框 ， 我 们 设置 其 当前 值 并 监听 change 事件 。 最 后 还 有 一 个 + 按钮 ， 我 们 
提交 输入 值 并 添加 到 列表 数组 。 


以 下 是 该 组 件 的 截图 : 
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@ @ 5 React App 


€ CQ@ localhost300 


Welcome to React 














现在 组 件 已 经 完成 , 在 浏览 器 中 运行 它 就 能 看 到 包含 两 个 默认 值 的 列表 ,以 及 一 个 用 于 新 增 
列表 项 的 表单 。 点 击 + 按 钮 就 能 在 列表 项 部 新 增 一 项 。 


如 果 不 给 这 个 组 件 添加 数 百 个 列表 项 ， 就 不 会 有 什么 特殊 问题 。 但 如 果 列 表 项 过 多 ,输入 时 
就 会 感觉 有 些 延 迟 。 性 能 下 降 的 原因 是 , 列表 项 数量 增多 后 , 每 次 用 户 输入 时 都 要 泻 染 整个 列表 。 
当 用 受 控 输 入 框 的 新 值 更 新 状态 时 ，React 会 再 次 调用 泻 染 方法 来 判断 元 素 是 否 一 致 。 


唯一 改变 的 地 方 是 input 元 素 的 值 ， 只 有 这 一 部 分 需要 修改 DOM; 但 为 了 找 出 必须 执行 的 
作 ，React 会 泻 染 整个 组 件 以 及 所 有 子 组 件 ， 多 次 重复 泻 染 大 型 列表 的 性 能 开销 非常 大 。 


如 果 现 在 查看 组 件 的 状态 对 象 ， 就 可 以 清楚 地 发 现 其 结构 有 问题 。 实 际 上 , 我 们 保存 的 列表 
项 和 表单 值 是 两 种 完全 不 同 的 数据 。 


我 们 应 该 始终 让 组 件 做 一 件 事 情 ， 而 不 是 承担 多 个 职责 。 

解决 这 个 问题 的 方法 是 ， 将 组 件 拆 分 成 多 个 小 组 件 ， 让 它们 各 自负 责 简单 的 职责 和 状态 。 

由 于 小 组 件 之 间 存 在 关联 , 我 们 还 需要 一 个 公有 父 组 件 。 实 际 上 ,如 果 我 们 不 想 在 每 次 用 户 
输入 时 重新 泻 染 列表 ， 那 么 同样 也 不 想 在 提交 表单 来 新 增 事项 时 再 次 泻 染 列表 。 

为 了 实现 这 一 点 ,我们 将 rodos 组 件 修改 为 只 负责 保存 items 数组 ， 列 表 和 表单 会 共享 这 
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然后 我 们 会 创建 独立 的 列表 组 件 ， 它 只 接收 items 数组 和 表单 组 件 ， 后 者 的 状态 用 于 控 什 
输入 框 。 提 交 表 单 时 会 触发 公有 父 组 件 的 回调 函数 ， 从 而 更 新 列表 。 


我 们 先 来 修改 Todos 组 件 : 


class Todos extends React.Component 


在 constructor 方法 中 ， 现 在 我 们 只 在 状态 中 定义 了 默认 的 items 数组 ， 并 绑 定 了 提交 
事件 的 处 理 器 以 作为 Form 组 件 的 回调 函数 : 


constructor(props) { 
super (props) 














this.state = { 
items: ['foo', 'bar'], 


} 


this.handleSubmit = this.handleSubmit .bind(this) 
} 


提交 事件 处 理 需 的 实现 与 前 面 点 击 事件 的 一 样 : 


handleSubmit (value) { 
const items = this.state.items.slice!() 
items.unshift (value) 











this.setStatel(lt{ 
items, 
} 
} 


不 过 这 里 会 接收 新 列表 项 的 值 作为 回调 参数 , 然后 复制 数组 并 在 头 部 插入 新 值 。 数 组 更 新 完 
毕 后 会 被 设置 到 状态 中 。 
render 方法 变 得 更 加 简洁 ， 因 为 我 们 只 要 泻 染 两 个 自 定义 组 件 ， 再 分 别 为 它们 传人 props: 
render() { 
return ( 
<div> 
<List items={this.state.items} /> 
<Form onSubmit={this.handleSubmit} /> 
</div> 


) 
} 


List 组 件 接 收 父 组 件 状态 中 的 items 数组 ，Form 组 件 接 收 nandlesubmit 方法 作为 
onsubmit 回调 ， 用 户 点 击 + 按钮 就 会 触发 该 回调 。 

现在 是 时 候 创 建 子 组 件 了 ， 先 从 List 组 件 和 人手 ， 只 要 从 之 前 的 泻 染 方法 中 抽取 部 分 代码 
即 可 。 
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我 们 以 类 的 形式 实现 List 组 件 ， 它 继承 自 Purecomponent ， 因 此 ， 只 有 items 数组 发 生 
变化 时 它 才 会 重新 演 染 : 





class List extends React.PureComponent 





render 方法 非常 简单 ， 只 要 遍历 数组 元 素来 生成 列表 即 可 : 


render() { 
return ( 


<ul> 


< /LS 
) 
} 


{this.props.items.map(item => <li key={item}>{item}</1i>)} 


Form 组 件 稍微 有 些 复杂 ,因为 它 要 处 理 受 控 输入 元 素 的 状态 。, 它 也 继承 自 Purecomponent， 
因此 ， 如 果 父 组 件 提 供 的 回调 函数 没有 改变 ， 那 么 它 就 不 会 重新 演 染 : 





class Form extends React.PureComponent 


定义 constructor 方法 ,设置 初始 状态 ， 并 为 受 控 输入 元 素 绑 定 change 事件 处 理 右 : 
constructor(props) { 
super (props) 


this.state = { 
Value: '', 

} 

this.handleChange = 


this.handleChange.bind (this) 
} 


change 事件 处 理 器 的 实现 和 我 们 目前 见 到 的 任何 受 控 输入 元 素 的 事件 处 理 器 类 似 : 
handleChange({ target }) { 
this.setState({ 
Value: target .value， 


} 
} 























它 接收 目标 元 素 ， 也 就 是 输入 元 素 本 身 ， 再 将 输入 值 保存 到 状态 中 。 
最 后 ， 在 render 方法 中 声明 构成 表单 的 所 有 元 素 : 


render() { 
return ( 








<div> 
<input 
type="text" 
value={this.state.value} 


onChange={this.handleChange} 
i> 
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<button 
onClick={() => this.props.onSubmit (this.state.value)} 
>+</button> 
</div> 
) 
其 中 包含 设置 了 值 的 受 控 输 入 框 ， 以 及 change 事件 处 理 器 和 + 按钮 ， 该 按钮 会 触发 父 组 件 
的 回调 并 传人 当前 输入 值 。 因 为 这 里 没有 其 他 纯粹 子 组 件 , 所 以 我 们 可 以 直接 在 render 方法 中 
生成 函数 。 


大 功 告 成 ! 如 果 现 在 运行 全 新 创建 的 Todos 组 件 , 我 们 会 在 页 面 上 看 到 和 之 前 一 样 的 行为 ， 
但 列表 和 表单 的 状态 分 开 了 ， 它 们 只 在 各 自 的 props 改变 时 才 会 重新 演 染 。 

举例 来 说 ， 即 使 尝试 在 列表 内 添加 数 百 个 项 ， 但 性 能 不 会 受到 影响 ,输入 框 也 不 会 有 延迟 。 
我 们 只 是 重 构 了 组 件 并 稍微 修改 了 设计 思路 来 恰当 地 分 离职 责 ， 就 解决 了 性 能 问题 。 




















9.4 工具 与 库 
接 下 来 我 们 将 介绍 一 些 技巧 、 工 具 和 库 ， 以 便 在 代码 库 中 用 它们 监控 并 提升 性 能 。 





9.4.1 不 可 变性 


我 们 在 前 面 提 过 ， shouldComponentUpdate 配合 PureComponent 是 提升 React 应 用 性 能 
的 最 强大 的 工具 。 


唯一 的 问题 是 ，Purecomponent 只 会 浅 比 较 props 以 及 状态 ， 也 就 是 说 ， 如 果 传 人 对 象 作 
为 prop ， 修 改 该 对 象 的 某 个 值 可 能 不 会 产生 我 们 想 要 的 行为 。 


这 是 因为 浅 比 较 检 测 不 到 对 象 属性 的 变化 ， 因 此 组 件 永远 不 会 重新 泻 染 ， 除 非 对 象 本 身 被 
替换 。 


解决 这 个 问题 的 其 中 一 种 方法 是 使 用 不 可 变数 据 : 这 种 数据 一 旦 创建 ， 就 无 法 再 修改 。 
举例 来 说 ， 可 以 按 以 下 方式 设置 状态 : 



































const obj = this.state.obj 
obj.foo = 'bar' 
this.setState({ obj }) 


即使 对 象 的 foo 属性 的 值 发 生 改变 ,但 对 象 引用 仍然 保持 不 变 ， 因 此 浅 比较 检测 不 到 这 次 
改变 。 


我 们 可 以 换 一 种 做 法 ， 每 次 修改 对 象 时 都 创建 新 的 实例 ， 如 下 所 示 : 





const obj = Object.assign({}, this.state.obj, { foo: 'bar' }) 
this.setState({ obj }) 


在 上 述 示 例 中 ， 我 们 得 到 了 foo 属性 值 为 par 的 新 对 象 ， 这 样 浅 比较 就 能 够 检测 到 前 后 的 
差别 。 


在 ES2015 和 Babel 的 帮助 下 ， 用 对 象 展 开 操作 符 可 以 更 优雅 地 表达 相同 概念 : 











const obj = { ...this.state.obj, foo: 'bar' } 
this.setState({ obj }) 


代码 结构 比 原来 的 更 简洁 ,而 且 效 果 相 同 ; 但 在 撰写 本 书 时 ,这 段 代 码 需 要 转译 后 才能 在 浏 
览 需 中 运行 。 


React 提供 了 一 些 与 不 可 变性 相关 的 辅助 工具 ， 大 大 简化 了 不 可 变 对 象 的 使 用 ， 此 外 ， 也 可 
以 使 用 流行 库 immutable.js， 它 提供 了 更 多 强大 特性 ， 但 需要 学 习 新 的 API。 














9.4.2 ”性 能 监控 工具 
我 们 已 经 学 习 过 如 何 用 React 提供 的 Perf 插件 追踪 应 用 的 性 能 信息 。 
在 前 面 的 示例 中 ， 我 们 用 组 件 的 生命 周期 钧 子 开启 或 关闭 监控 过 程 ， 如 下 所 示 : 


componentWillUpdate() { 
Perf.start () 
} 














componentDidUpdate() { 
Perf.stop() 
Perf.printOperations () 


} 


调用 关闭 方法 后 , 我 们 还 用 printoperations 方法 在 浏览 器 控制 台中 打印 了 React 当前 执 
行 了 哪些 DOM 操作 ， 以 促使 改动 生效 。 








这 样 做 效果 不 错 ，Perf 也 确实 是 非常 有 用 的 工具 。 但 为 了 追踪 组 件 性 能 信息 而 占用 钩子 并 
污染 代码 库 似 乎 有 些 多 余 。 


最 好 的 方案 应 该 是 不 需要 修改 代码 就 能 监控 组 件 性 能 ， 为 了 实现 这 一 点 ， 可 以 使 用 Chrome 
的 chrome-react-perf 扩展 。 

















在 浏览 器 中 打开 以 下 URL 即 可 安装 该 扩展 : 
https://chrome.google.com/webstore/detail/reactperf/hacmcodfllhbnekmghgdlplbdnahmhmm 
这 个 扩展 在 开发 者 工具 中 新 建 了 一 个 面板 , 在 这 个 面板 下 不 用 编写 任何 代码 就 能 简单 方便 地 
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开启 或 关闭 Perf 插件 。 

















能 够 帮助 我 们 轻松 收集 组 件 性 能 信息 的 另 一 个 工具 是 react -perf-tool, 我 们 可 以 在 应 用 
中 安装 、 导 入 并 添加 这 个 组 件 , 它 会 在 浏览 器 窗口 中 提供 一 个 美观 的 界面 , 便于 管理 Perf 插件 。 














该 组 件 会 在 页 面 底部 显示 一 个 控制 台 , 可 以 在 这 里 开启 或 关闭 监控 。 它 不 以 表格 的 形式 显示 
数据 ， 而 是 演 染 美观 的 图 表 ， 以 便 我 们 更 容易 找 出 哪个 组 件 耗费 了 更 多 演 染 时 间 。 





9.4.3 ”Babel 插件 





我 们 还 可 以 安装 一 些 有 趣 的 Babel 插件 来 提升 React 应 用 的 性 能 。 它 们 在 构建 时 优化 代码 ， 
以 促进 应 用 更 快运 行 。 





第 一 个 插件 名 为 React 常量 元 素 转换 器 ， 它 会 寻找 不 随 props 改变 的 所 有 静态 元 素 ， 并 将 它 
们 从 演 染 方法 (或 者 无 状态 函数 式 组 件 ) 中 抽 离 出 来 ， 以 避免 多 余地 调用 createElement。 


Babel 插件 的 用 法 很 直观 ， 先 用 npm 安装 它 : 











npm install --save-dev babel-plugin-transform-react-constant-elements 
然后 编辑 .babelrc 文件 ， 添 加 plugins 数组 属性 ， 其 中 包含 了 我 们 想 要 激活 的 插件 列表 。 
本 例 的 插件 列表 如 下 所 示 : 


{ 


"plugins": ["transform-react-constant-elements"] 








} 








能 够 帮助 提升 性 能 的 第 二 个 Babel 插 件 叫 作 React 行内 元 素 转换 器 , 它 会 将 所 有 JSX 声 明 ( 或 
者 createElement 调用 ) 替换 成 优化 过 的 版 本 ， 以 便 代 码 可 以 更 快 执行 。 


执行 以 下 命令 来 安装 该 插件 : 








npm install --save-dev babel-plugin-transform-react-inline-elements 


接着 将 它 添加 到 .babelrc 文件 的 插件 数组 中 ， 如 下 所 示 : 
{ 


"plugins": ["transform-react-inline-elements"] 


} 


这 两 个 插件 都 只 应 该 在 生产 环境 中 启用 ， 因 为 它们 会 使 开发 环境 中 的 调试 变 得 很 困难 。 








9.5 小 结 








关于 性 能 的 旅程 已 经 结束 了 ， 现 在 我 们 可 以 优化 应 用 ， 为 用 户 提 供 更 好 的 体验 。 
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我 们 在 本 章 中 学 习 了 一 致 性 比较 算法 的 原理 ， 以 及 React 如 何 总 是 尝试 按 最 优 路 径 来 修改 
DOM。 我 们 还 可 以 用 key 属性 帮助 库 更 好 地 工作 。 


始终 牢记 ,用 Perf 插件 测试 应 用 中 需要 优化 的 部 分 时 ， 要 使 用 生产 版 本 的 React。 


找到 瓶颈 所 在 后 ,可 以 采用 本 章 中 介绍 的 任何 一 种 技巧 来 修复 问题 。 你 能 用 的 第 一 个 工具 就 
是 继承 Purecomponent 并 使 用 不 可 变数 据 ， 这 样 组 件 只 会 在 真正 需要 时 才 重 新 泻 染 。 


不 要 忘 了 避免 导致 Purecomponent 低 效 的 那些 常见 错误 ,例如 ,在 演 染 方法 中 生成 新 函数 ， 
或 者 将 常量 作为 props。 


我 们 还 学 到 了 合理 地 重 构 和 重新 设计 组 件 架构 也 有 助 于 提升 性 能 。 我 们 的 目标 是 创建 小 型 组 
件 ， 使 它们 尽 可 能 只 有 单一 职责 。 


本 章 最 后 介绍 了 不 可 变性 ， 我 们 学 习 了 用 不 可 变数 据 让 shouldComponentUpdate 和 
shallowCompare 发 挥 作用 的 重要 性 。 最 后 ， 我 们 还 介绍 了 一 些 能 让 应 用 更 快运 行 的 工具 和 库 。 


下 一 章 将 介绍 测试 与 调试 的 相关 内 容 。 

















测试 与 调试 








得 益 于 React 的 组 件 化 开发 ， 测 斌 应 用 变 得 很 简单 。 我 们 可 以 用 许多 工具 编写 React 测试 ， 
本 章 将 介绍 其 中 流行 的 一 些 工 具 ， 以 便 你 理解 它们 带 来 的 好 人 处 。 


Jest 是 一 套 完备 的 测试 框架 方案 , 由 Facebook 的 Christopher Pojer 以 及 社区 中 的 多 名 贡献 者 
所 维护 ， 它 致力 于 提供 最 佳 的 开发 体验 ; 你 也 可 以 选择 用 Mocha 自行 搭建 框架 。 本 章 将 介绍 构 
建 最 佳 测试 环境 的 这 两 种 方式 。 


通过 学 习 TestUtils 和 Enzyme， 你 将 学 习 浅 泻 染 和 完整 DOM 演 染 之 间 的 区 别 , 快照 测试 的 
原理 ， 以 及 如 何 收集 有 用 的 代码 覆盖 率 信 息 。 


充分 理解 这 些 工具 及 其 功能 后 , 我 们 将 为 Redux 代码 库 的 一 个 组 件 编写 测试 , 并 探讨 一 些 复 
杂 场 景 下 的 常用 测试 方案 。 


阅读 完 本 章 后 ， 你 就 可 以 从 零 搭建 一 套 测试 环境 ， 并 为 应 用 的 组 件 编写 测试 。 
本 章 包含 如 下 内 容 。 


口 为 何 测试 应 用 很 重要 ， 以 及 测试 如 何 帮 助 开 发 人 员 更 快 地 行动 。 
口 如 何 搭建 Jest 环境 ， 并 用 TestUtils 测试 组 件 。 

口 如 何 用 Mocha 搭建 相同 的 环境 。 

口 什么 是 Enzyme， 以 及 为 何 它 是 测试 React 应 用 的 必 备 工具 。 
口 如 何 测 试 真实 的 组 件 。 

口 Jest 快照 与 Istanbul 代码 覆盖 率 工具 。 

口 高 阶 组 件 和 包含 多 层 和 能 套子 组 件 的 复杂 页 面 的 常用 测试 方案 。 
口 React 开发 者 工具 与 一 些 错误 处 理 技巧 。 










































































10.1 测试 的 好 处 
测试 Web UI 的 难度 一 直 很 大 。 不 管 是 单元 测试 还 是 端 对 端 测试 ， 由 于 实际 情况 下 界面 依赖 
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于 浏览 器 ,用户 交 互 以 及 其 他 诸多 因素 导致 高 效 的 测试 方案 很 难 实现 。 


如 果 曾 经 试 过 为 Web 编写 端 对 端 测试 ， 你 就 会 知道 想 要 获得 一 致 的 结果 非常 复杂 ， 更 不 用 
说 测试 结果 还 常常 受 漏 判 率 影响 ,很 多 因素 都 会 导致 漏 判 ， 比 如 网 络 。 除 此 之 外 , 改善 体验 、 最 
大 化 用 户 转化 率 或 者 新 增 特性 都 需要 频繁 更 新 UI。 


如 果 测 试 难以 编写 和 维护 ,开发 人 员 就 很 难 将 测试 覆盖 整个 应 用 。 另 一 方面 , 测试 又 非常 重 
要 , 因为 它们 能 使 开发 人 员 对 自己 的 代码 开发 速度 和 质量 更 有 信心 。 如 果 一 段 代 码 经 过 充分 测试 
(测试 代码 也 编写 得 很 好 )， 那 么 开发 人 员 就 可 以 确保 它 能 正常 运行 ， 随 时 可 以 发 布 。 同 样 ， 测 试 
也 使 代码 重 构 更 简单 ， 因 为 它 能 确保 重 写 代 码 时 不 会 改变 原 有 功能 。 


开发 人 员 往 往 更 注重 正在 开发 的 特性 ， 有 时 很 难 判 断 应 用 其 他 部 分 是 否 会 被 当前 改动 所 影 
响 。 测 试 有 助 于 避免 代码 回 退 ， 因 为 它 会 告诉 开发 人 员 新 的 代码 能 和 否 通过 旧 的 测试 。 这 样 一 来 ， 
开发 人 员 在 开发 新 特性 时 会 更 有 信心 ， 发 布 过 程 也 能 大 大 加 快 。 

测试 应 用 的 主要 功能 可 以 使 代码 库 更 加 稳固 。 找 到 新 的 bug、 重 现 并 修复 都 不 算 什么 难事 ， 
而 覆盖 测试 能 够 确保 该 bug 以 后 不 会 再 出 现 。 

好 在 React (以 及 组 件 化 时 代 ) 使 得 UI 的 测试 变 得 更 加 简单 、 高 效 。 测试 组 件 和 组 件 树 不 再 
那么 费劲 ， 因 为 应 用 的 每 个 单独 部 分 都 有 各 自 的 职责 和 界限 。 

如 果 合 理 地 开发 组 件 , 而 且 组 件 本 身 很 纯粹 ,并且 做 到 了 模块 化 和 可 复 用 , 那么 就 能 像 简 单 
函数 那样 测试 它们 。 

现代 工具 还 为 我 们 提供 了 另 一 项 强大 功能 ， 即 可 以 用 Node 和 控制 台 运 行 测试 。 每 个 测试 用 
例 都 要 启动 浏览 器 会 拖 慢 测试 过 程 ， 降低 可 预测 性 , 使 开发 体验 大 打折 扣 ; 用 控制 台 运 行 测试 会 
快 很 多 oO 

当 在 真实 的 浏览 器 中 泻 染 组 件 时 ， 只 用 控制 台 测试 组 件 有 时 会 产生 意外 行为 , 但 根据 我 的 经 
验 来 说 ， 这 类 情况 很 少见 。 

测试 React 组 件 时 ,我 们 想 要 确保 它们 能 正常 工作 ,传人 不 同 组 合 的 props 总 能 输出 正确 结果 。 

或 许 我 们 还 想 要 覆盖 组 件 可 能 拥有 的 各 种 状态 。 点 击 按钮 可 能 会 改变 状态 ,因此 我 们 需要 编 
写 测 试 来 检查 是 否 所 有 事件 处 理 器 都 能 按 预期 工作 。 
即使 覆盖 了 组 件 的 所 有 功能 ,我 们 还 想 更 进一步 , 编写 测试 来 验证 组 件 在 极端 情况 下 的 行为 。 
举例 来 说 , 极端 情况 就 是 所 有 props 都 是 null 或 者 出 现 报错 时 的 组 件 的 状态 。 有 了 这 类 测试 后 ， 
我 们 就 能 更 加 确信 组 件 行 为 符合 预期 。 
测试 单个 组 件 很 有 效 ， 但 这 无 法 确保 多 个 测试 过 的 独立 组 件 放 到 一 起 后 仍然 可 以 正常 工作 。 
我 们 后 面 将 会 看 到 ，React 可 以 挂 载 整 棵 组 件 树 ， 并 测试 组 件 的 集成 是 否 有 问题 。 
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Wh 


书写 测试 的 技巧 有 很 多 ， 测 试 驱动 开发 ( test driven development，TDD ) 是 其 中 十 分 流行 的 
一 种 。 采 用 TDD 模式 意味 着 先 编写 测试 ， 然 后 再 编写 能 够 通过 测试 的 代码 。 


遵循 这 种 模式 可 以 帮助 我 们 写 出 更 好 的 代码 , 因为 它 促使 我 们 在 实现 功能 前 花 更 多 精力 思考 
设计 ， 这 往往 会 带 来 更 高 的 质量 。 















































10.2 用 Jest 轻松 测试 JavaScript 


要 想 学 习 如 何 正确 测试 React 组件， 最 重要 的 是 动手 编写 代码 ， 我 们 将 在 本 方 中 实 战 一 番 。 


React 文档 提 到 过 ，Facebook 的 开发 人 员 使 用 Jest 来 测试 组 件 。 不 过 ，React 并 没有 强制 你 只 
能 使 用 特定 的 测试 框架 ， 你 可 以 随意 使 用 自己 最 喜欢 的 测试 框架 。 


下 一 方 将 介绍 如 何 用 Mocha 测试 组 件 。 

为 了 实战 使 用 Jest, 我 们 将 从 零 搭建 一 个 项 目 , 安装 所 有 依赖 并 编写 一 个 组 件 和 相关 的 测试 。 
这 会 非常 有 趣 ! 

首先 ， 进 入 一 个 新 文件 夹 ， 并 执行 以 下 命令 : 

npm init 

生成 packagejson 后 就 可 以 开始 安装 依赖 ， 第 一 个 就 是 jest 包 本 身 : 

npm install --save-dev jest 


为 了 让 npm 知道 我 们 想 用 jest 命令 运行 测试 ， 需要 在 packagejson 中 添加 以 下 脚本 : 







































































VerTTDEET 
ES 


} 


为 了 能 够 用 ES2015 和 JSX 编写 组 件 和 测试 ， 需 要 安装 与 Babel 相关 的 所 有 包 ， 这 样 Jest 就 
能 用 它们 转译 并 读 懂 代码 。 


第 二 批 需要 安装 的 依赖 如 下 所 示 : 

















npm install --save-dev babel-jest babel-preset-es2015 babel-preset-react 


你 可 能 已 经 知道 了 ， 现 在 要 创建 .pabelrc 文件 ， 它 负责 告诉 Babel 项 目 中 要 使 用 哪些 预 设 规 
则 和 插件 。 


.babelrc 内 容 如 下 所 示 : 





{ 
"presets": ["es2015", "react"] 


} 
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现在 是 时 候 安装 React 和 ReactDOM 了 ， 可 以 用 它们 来 创建 和 泻 染 组 件 ; 
npm install --save react react-dom 


搭建 工作 已 经 完成 , 我 们 可 以 用 ES2015 代码 运行 Jest, 并 在 DOM 中 演 染 组 件 , 不 过 还 有 一 
有 要 做 。 


前 面 提 到 过 ， 我 们 想 用 Node 和 控制 台 运 行 测试 。 要 想 实 现 这 一 点 ， 就 不 能 用 ReactDOM 泻 
染 组 件 ， 因 为 它 需 要 浏览 器 的 DOM 接口 。 


Facebook 团队 开发 了 TestUtils 工具 ， 有 了 它 之 后 ， 任 何 测试 框架 都 可 以 很 轻松 地 测试 React 
组 件 。 


我 们 先 安装 这 个 工具 ， 然 后 看 看 它 提供 了 什么 功能 : 





件 


hl 








npm i --save-dev react-addons-test-utils 

现在 测试 组 件 所 需 的 依赖 都 准备 好 了 。TestUtils 库 提供 的 函数 可 以 用 来 浅 泻 染 组 件 , 或 者 将 
组 件 浑 染 到 浏览 器 以 外 的 独立 DOM 中 。 它 还 提供 了 一 些 工 具 方 法 ， 可 以 引用 在 独立 DOM 中 泻 
染 的 节点 ， 这 样 我 们 就 可 以 根据 节点 的 值 进行 断言 和 预测 。 

TestUtils 还 可 以 模拟 浏览 器 事件 ， 并 检查 事件 处 理 需 是 否 正确 设置 。 

我 们 开始 动手 创建 一 个 组 件 来 进行 测试 。 

组 件 名 为 Button， 它 会 用 props 中 的 文本 来 泻 染 一 个 按钮 元 素 ， 并 为 点 击 事件 绑 定 事件 处 
理 器 。 我 们 将 采取 TDD 的 形式 ， 一 开始 只 编写 结构 代码 ， 然 后 依据 测试 编写 具体 的 实现 。 

因为 TestUtils 对 无 状态 函数 式 组 件 有 一 些 限制 ， 所 以 我 们 要 以 类 的 形式 实现 这 个 组 件 。 

创建 button.js 文件 并 导入 React: 

import React from 'react' 

定义 Button 组 件 ， 如 下 所 示 : 

class Button extends React.Component 

目前 泻 染 方法 只 要 返回 一 个 aiv 元 素 让 组 件 能 够 运行 即 可 : 

render() { 

return <div /> 
} 
最 后 ， 导 出 Button 组 件 : 


export default Button 


现在 可 以 开始 测试 这 个 组 件 了 ， 我 们 先 创建 button.spec.js 文件 ， 并 在 其 中 编写 第 一 条 测试 。 
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Jest 会 在 源 代码 文件 夹 中 寻找 以 .spec 、.test 结尾 的 文件 , 或 者 位 于 _ tests ”folder 文件 夹 下 的 
文件 ; 不 过 为 了 满足 项 目 需 要 ， 你 也 可 以 按 自己 的 想法 修改 这 项 配置 。 


在 button.spec.js 中 先导 入 依赖 : 





import React from 'react' 
import TestUtils from 'react-addons-test-utils' 
import Button from './button' 








第 一 项 依赖 是 用 于 编写 JSX 代码 的 React, 第 二 项 是 TestUtils, 稍 后 我 们 将 介绍 如 何 使 用 它 。 
最 后 一 项 就 是 刚刚 创建 的 Button 组 件 。 








我 们 要 编写 的 第 一 条 测试 用 于 确认 一 切 依赖 都 能 正常 运行 〈 我 总 会 这 样 做 )， 如 下 所 示 : 


test('works', () => { 
expect (true) .toBe (true) 


}) 




















test 水 数 接受 两 个 参数 ， 第 一 个 参数 用 于 描述 本 条 测试 ， 第 二 个 参数 就 是 包含 实际 测试 代 
码 的 痕 数 。 男 外 ， 可 以 用 expect 困 数 对 某 个 对 象 进行 预测 ， 它 还 可 以 链 式 调用 其 他 方法 ， 如 
toBe， 以 检查 传 给 expect 的 对 象 和 传 给 toBe 的 对 象 是 否 相同 。 


打开 终端 ， 并 运行 以 下 命令 : 




















npm test 
你 应 该 可 以 看 到 以 下 输出 内 容 : 


PASS ./button.spec.js 
w works (3ms) 
Test Suites: 1 passed, 1 total 


Tests: 1 passed, 1 total 
Snapshots: 0 total 
Time: 1.48s 


Ran all test suites. 


如 果 控 制 台 输出 PASS， 那 么 你 可 以 准备 编写 真正 的 测试 了 。 























正如 之 前 说 过 ， 我 们 想 要 测试 的 是 ， 传 和 人 一些 props 时 组 件 能 够 正确 泻 染 ， 并 且 事 件 处 理 器 
可 以 按 预 期 工作 。 


测试 React 组 件 的 方式 一 般 有 两 种 : 
口 浅 泻 染 ; 
口 将 组 件 挂 载 到 独立 DOM 中 。 

















第 一 种 方式 最 简单 ,也 最 好 理解 ， 我们 先 来 学 习 它 。 浅 泻 染 允许 你 按 一 级 深度 泻 染 组 件 ， 然 
后 根据 它 返 回 的 泻 染 结果 进行 一 些 预 测 。 
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只 泻 染 一 级 深度 是 指 将 组 件 隔离 出 来 测试 , 即使 其 中 包含 一 些 很 复杂 的 子 组 件 , 它们 也 不 会 





被 泻 染 ， 就 算 它 们 发 生变 化 或 者 加 载 失 败 ， 也 不 影响 测试 结果 。 
条 基础 测试 用 于 检查 给 定 的 文本 是 否 泻 染 为 putton 元 素 的 子 元 素 。 











我 们 编写 的 第 
测试 代码 的 开头 如 下 所 示 : 
test('renders with text', 
第 一 步 先 定义 文本 变量 
的 值 : 

const text = 


现在 可 以 开始 实现 浅 渲染 了 ， 它 只 有 三 行 代码 : 











() 


全 ~ 来 








光臣 


const renderer = TestUtils.createRenderer () 
renderer.render (<Button text={text} />) 
const button = renderer.getRenderOutput() 




















， 它 会 作为 prop 传 给 组 件 ， 我 们 还 要 根据 它 来 判断 是 否 泻 染 了 正确 











得 到 演 染 结果 。 
泻 染 结果 和 以 下 对 象 类 似 : 


{ '$$typeof': Symbol (react.element), 
type: 'button', 
key: null, 
ref: null, 
props: { onClick: undefined, 
_owner: null, 
_store: {} } 


你 可 能 认 出 了 这 是 一 个 React 元素, 因为 它 带 有 type 
元 素 ， 我 们 想 要 确保 它 的 值 是 正确 的 。 


children: 
































第 一 行 代码 创建 了 renderer 变量 , 第 二 行 传 人 了 文本 变量 来 泻 染 putton 组 件 , 最 后 一 行 


'text' }, 








属性 和 prop。 第 二 个 prop 是 chilgdren 


现在 我 们 知道 了 泻 染 结果 的 结构 ， 编 写 预测 代码 就 很 简单 了 : 


expect (button.type) .toBe('button') 
expect (button.props.children) .toBe (text) 











定 文本 作为 子 元 素 。 
最 后 ， 关 闭 测试 代码 块 : 
) ) 
如 果 现 在 切换 到 控制 台 并 输入 以 下 命令 : 


上 


上 述 代 码 表示 我 们 希望 button 组 件 返 回 一 个 类 型 属性 为 putton 的 元 素 , 并 且 它 应 该 将 给 
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npm test 
你 应 该 可 以 看 到 以 下 内 容 : 


FAIL ./button.spec.js 
® renders with text 
expect (received) .toBe (expected) 
Expected value to be (using ===): 
"button" 
Received: 
"div" 

















测试 没有 通过 ， 这 和 我 们 预想 的 一 样 ， 因 为 这 是 TDD 模式 第 一 次 运行 测试 ， 此 时 组 件 还 没 
有 实现 。 它 只 返回 一 个 div 元 素 。 接 下 来 回 到 button 组 件 中 ,编写 代码 使 测试 得 以 通过 。 我 
们 对 renaer 方法 进行 以 下 修改 : 

















render() { 
return ( 
<button> 
{this.props.text} 
</button> 
) 
} 


然后 再 次 运行 npm test， 控 制 台 上 应 该 会 出 现 一 个 绿色 的 勾 : 





PASS ./button.spec.js 
w renders with text (9ms) 
Test Suites: 1 passed, 1 total 


Tests: 1 passed, 1 total 
Snapshots: 0 total 
Time: 1.629s 


Ran all test suites. 


祝贺 你 ! 你 用 TDD 模式 编写 的 第 一 条 组 件 测试 通过 了 。 





现在 我 们 来 看 看 如 何 编写 测试 检查 按钮 点 击 时 会 调用 传 给 组 件 的 onclick 处 理 需 。 
开始 编码 前 ， 我 们 要 引入 两 个 新 的 概念 : mock 与 独立 DOM。 

















前 者 可 以 简化 测试 过 程 中 对 函数 行为 的 测试 。 这 里 我 们 要 用 onclick 属性 将 一 个 函数 传递 
给 按钮 组 件 ， 并 验证 用 户 点 击 按钮 时 是 否 会 触发 这 个 函数 。 











为 了 实现 这 一 点 ， 我 们 需要 创建 一 个 名 为 mock 的 特殊 函数 (又 名 spy， 具 体 取决 于 框架 )， 
这 个 函数 的 行为 很 像 真 正 的 函数 , 但 拥有 一 些 特殊 属性 。 举 例 来 说 , 我 们 可 以 检查 它 是 否 被 调用 
过 ， 以 及 调用 的 次 数 和 参数 。 




















Jest 是 一 套 完 备 的 测试 框架 ,提供 了 正确 编写 测试 所 需 的 一 切 工 具 。 用 Jest 提 供 的 jest .fn() 
就 能 创建 一 个 mock 函数 。 
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编写 下 一 步 测 试 前 要 掌握 的 第 二 个 概念 是 ,我 们 无 法 用 TestUtils 在 浅 泻 染 中 模拟 DOM 事件 。 
原因 是 ， 要 想 用 TestUtils 模拟 事件 ， 需 要 操作 真正 的 组 件 ， 而 不 是 简单 的 React 元 素 。 


因此 ， 要 想 测试 浏 览 器 事件 ， 需 要 将 组 件 渔 染 到 独立 DOM 中 。 在 真正 的 DOM 中 泻 染 组 件 
需要 浏览 器 环境 ,但 Jest 提供 了 一 个 特殊 的 DOM 结构 ， 我 们 可 以 用 控制 台 将 组 件 泻 染 进去 。 









































与 浅 泻 染 相 比 ， 将 组 件 浑 染 到 DOM 中 的 语法 稍微 有 些 不 同 。 我 们 来 看 看 具体 的 测试 代码 。 
首先 ,创建 新 的 测试 代码 块 : 

test('fires the onClick callback', () => { 

测试 的 描述 表明 我 们 将 检查 onclick 回调 能 否 正常 工作 。 

然后 用 jest 函数 创建 onclick mock 函数 : 


const onClick = jest.fn() 


接 下 来 就 是 完全 将 组 件 泻 染 进 DOM : 




















const tree = TestUtils.rendqerInLoDocument ( 
<Button onClick={onClick} /> 
) 


如 果 在 控制 台 打印 整 棵 树 ， 就 会 看 到 我 们 取 回 了 真正 的 组 件 实例 ， 而 不 仅仅 是 React 元 素 。 











出 于 同样 的 原因 ， 我 们 不 能 简单 地 查看 renderIntoDocument 函数 返回 的 对 象 ， 而 要 用 
TestUtils 库 中 的 函数 来 查找 按钮 元 素 : 


const button = TestUtils.findRenderedDOMComponentWithTagl( 
tree, 
'button' 

) 


顾名思义 ， 这 个 函数 会 根据 传人 的 标签 名 在 树 中 查找 组 件 。 
现在 我 们 用 TestUtils 的 另 一 个 函数 来 模拟 事件 : 


TestUtils.Simulate.click (button) 10 


Simulate 对 象 接受 一 个 与 事件 同名 的 函数 ， 函 数 的 参数 就 是 要 触发 事件 的 目标 组 件 。 





























最 后 ， 编 写 预测 代码 : 

expect (onclick) .toBeCalled() 

这 里 简单 地 表明 我 们 希望 mock 函数 被 调用 。 

执行 npm test 来 运行 测试 ， 但 测试 不 会 通过 ， 因 为 onclick 的 功能 还 未 实现 。 
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FAIL ./button.spec.js 
® fires the onClick callback 


expect (jest .fn()).toBecalled() 
Expected mock function to have been called. 


这 就 是 TDD 流程 的 运作 方式 。 我 们 回 到 buttonjjs 中 并 实现 事件 处 理 器 ， 按 以 下 方式 修改 


render 方法 : 


render() { 
return ( 
<button onClick={this.props.onClick}> 
{this.props.text} 
</button> 
) 
} 


再 次 执行 npm test， 此 时 测试 通过 了 : 























PASS ./button.spec.js 

w renders with text (10ms) 

w fires the onClick callback (17ms) 
Test Suites: 1 passed, 1 total 


Tests: 2 passed, 2 total 
Snapshots: 0 total 
Time: 1.401s, estimated 2s 


Ran all test suites. 


我 们 完整 测试 并 正确 实现 了 这 个 组 件 。 


10.3 ”灵活 的 测试 框架 Mocha 





接 下 来 我 们 将 学 习 如 何 用 Mocha 实现 相同 的 效果 ， 并 证 明 你 可 以 月 





React。 另 外 ， 本 节 也 有 利于 学 习 两 个 测试 框架 间 的 主要 区 别 ，Jest 是 一 个 





任何 测试 框架 来 测试 
高 度 集成 的 测试 框架 ， 


尝试 自动 完成 一 切 操 作 ， 以 便 开发 体验 更 加 流畅 ， 而 Mocha 本 身 不 关心 你 需要 哪些 工具 。 使 用 





Mocha 需要 你 自行 决定 安装 哪些 不 同 的 包 来 正确 测试 React。 
创建 一 个 新 的 文件 夹 ， 并 用 以 下 语句 初始 化 一 个 新 的 npm 包 : 





npm init 
首先 安装 mocha: 
npm install --save-dev mocha 








和 Jest 一 样 , 要 想 使 用 ES2015 和 JSX, Mocha 也 需要 借助 Babel, 为 出 


,， 先 安装 下 列 这 些 包 : 


npm install --save-dev babel-register babel-preset-es2015 babel-preset-react 
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安装 完 Mocha 和 Babel 后 ， 设 置 测试 脚本 ， 如 下 所 示 : 


Ver LDS 和 示 
"test": "mocha --compilers js:babel-register" 


}, 


我 们 告诉 npm 运行 mocha 测试 任务 ,启用 编译 器 标记 设置 让 Babel 记 录 器 负责 处 理 JavaScript 
文件 。 

















下 一 步 ， 安 装 React 和 ReactDOM : 

npm install --save react react-dom 

再 安装 TestUtils， 我 们 要 用 它 在 测试 环境 中 演 染 组 件 : 
npm install --save-dev react-addons-test-utils 


用 Mocha 编写 测试 的 基本 功能 已 经 准备 好 了 ,但 为 了 用 上 和 Jest 一 样 的 功能 ， 我 们 还 要 安 


装 三 个 包 。 























第 一 个 是 chai ， 它 人 允许 我 们 像 Jest 那样 编写 预测 代码 。 第 二 个 是 提供 了 spies 功能 的 
chai-spies， 可 以 用 于 检查 onclick 回调 是 否 被 调用 过 。 








最 后 很 重要 的 一 个 包 是 jsdom, 它 可 以 用 于 创建 独立 DOM, 这 样 即 便 没 有 真实 浏览 器 环境 ， 
也 可 以 在 控制 台中 使 用 TestUtils: 











npm install --save-dev chai chai-spies jsdom 


现在 可 以 开始 编写 测试 了 ,我 们 会 用 到 前 面 创建 的 button.js。 它 已 经 完整 实现 了 ， 因 此 这 次 
不 需要 重复 TDD 流程 ， 本 节 的 目的 在 于 展示 两 个 框架 间 的 差别 。 























Mocha 约定 ， 测 试用 例 应 该 放 在 test 文件 夹 下 ， 新 建 该 文件 来， 并 放 入 button.specjs 文件。 
首先 ， 导 和 所 有 依赖 : 


import chai from 'chai' 

import spies from 'chai-spies' 

import { jsdom } from 'jsdom' 

import React from 'react' 

import TestUtils from 'react-addons-test-utils' 
import Button from '../button' 


你 可 能 已 经 注意 到 了 ， 导 入 项 比 Jest 多 了 不 少 ， 因 为 Mocha 人 允许 你 自由 选择 想 要 的 工具 。 
下 一 步 ， 让 chai 使 用 spy: 





chai.use(sSpies) 


接着 从 chai 中 引用 我 们 需要 的 功能 。 实 现 测试 用 例 时 会 用 到 它们 : 
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下 一 步 , 设置 jsdom， 并 提供 演 染 React 组件 所 需 的 DOM 对 象 : 


global.document = jsdom('') 
global.window = document .defaultView 


一 切 就 绪 后 就 可 以 开始 编写 第 一 条 测试 了 。Mocha 最 典型 的 地 方 就 是 要 用 两 个 函数 定义 测 
试 : 第 一 个 函数 是 describe， 它 负责 封装 相同 模块 的 一 系列 测试 用 例 ; 另 一 个 函数 是 让 ， 它 
包含 具体 的 测试 代码 。 

在 本 例 中 ， 我 们 先 描述 按钮 的 行为 : 

describe('Button', () => { 


然后 编写 第 一 条 测试 ， 这 里 我 们 希望 元 素 类 型 和 文本 是 正确 的 : 














it('renders with text', () => { 

定义 文本 变量 ， 以 判断 预测 代码 是 否 有 效 : 
const text = 'text' 

接着 像 之 前 一 样 浅 演 染 组 件 : 

const renderer = TestUtils.createRenderer () 


renderer.render (<Button text={text} />) 
const button = renderer.getRenderOutput() 


最 后 ， 完 成 预测 代码 : 





expect (button.type) .to.equal('button') 
expect (button.props.children) .to.equal (text) 


如 你 所 见 ， 这 里 的 语法 有 些 不 同 。 我 们 没有 用 toBe 方法 ， 而 是 链 式 调用 了 chai 提供 的 
to.equal 方法 。 但 两 者 效果 一 样 ， 都 是 比较 两 个 值 是 否 相 等 。 

现在 可 以 闭合 第 一 个 测试 代码 块 了 : 

}) 

第 二 条 测试 负责 测试 onclick 回调 是 否 被 触发 ， 如 下 所 示 : 

it('fires the onclick callback'，() => { 


接着 创建 spy， 做 法 和 之 前 一 样 : 


























const onClick = Spy() 
用 TestUtils 将 按钮 演 染 进 独 立 DOM[: 


const tree = TestUtils.renderIintoDocument( 
<Button onClick={onClick} /> 
) 
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再 根据 标签 名 在 tree 对 象 中 查找 组 件 : 
const button = TestUtils.findqRendqeredqDOMComponentWitLhTag ( 
tree, 
'button' 
) 
下 一 步 ， 模拟 按钮 点 击 : 
TestUtils.Simulate.click(button) 
最 后 ， 完 成 预测 代码 : 
expect (onClick) .to.be.called() 
这 里 的 语法 还 是 有 些 不 同 ， 但 概念 依然 保持 不 变 : 检查 是 否 调用 过 spy 函数 。 
现在 用 Mocha 运行 root 文件 夹 下 的 npm test 命令， 我 们 应 该 可 以 看 到 以 下 信息 : 
Button 
wy renders with text 


w fires the onClick callback 


2 passing (847ms) 


这 表明 我 们 的 测试 已 经 通过 ， 现 在 可 以 开始 用 Mocha 测试 真正 的 组 件 了 。 
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现在 ， 你 应 该 很 清楚 如 何 用 Jest 和 Mocha 测试 基础 组 件 ， 以 及 两 者 分 别 有 何 优 缺 点 。 
你 也 学 习 了 TestUtils 库 的 使 用 ， 以 及 浅 泻 染 与 完整 DOM 演 染 的 区 别 。 


你 可 能 还 发 现 , 虽然 对 测试 组 件 来 说 很 有 用 , 但 TestUtils 用 起 来 比较 繁琐 ,而 且 有 时 很 难 正 
确 获 取 元 素 及 其 属性 的 引用 。 


由 于 这 些 原因 ，AirBnb 的 开发 人 员 开 发 了 Enzyme， 它 基于 TestUtils 构建 ， 可 以 更 方便 地 操 
作 泻 染 后 的 组 件 。 


它 的 API 设 计 得 和 jQuery 一 样 棒 ， 并 提供 了 许多 实用 工具 来 操作 组 件 ， 以 及 其 状态 和 属性 。 
我 们 来 看 看 如 何 将 Jest 测试 从 TestUtils 切换 到 Enzyme。 
现在 回 到 之 前 创建 的 Jest 项 目 文件 夹 中 ， 安 装 enzyme: 
































npm install --save-dev enzyme 


打开 button.specjs， 将 导入 语句 修改 为 如 下 所 示 的 代码 : 


188 第 10 章 ”测试 与 调试 





import React from 'react' 
import { shallow } from 'enzyme' 
import Button from './button' 


如 你 所 见 , 这 里 不 再 导入 TestUtils , 而 是 从 Enzyme 导入 shallow 哨 数 ,顾名思义 , shallow 
函数 就 是 提供 浅 泻 染 功能 的 函数 ， 此 外 它 还 有 一 些 特殊 的 特性 。 

首先 ，Enzyme 可 以 在 浅 演 染 元 素 中 模拟 事件 ，TestUtils 无 法 实现 这 一 点 。 最 重要 的 是 ， 该 
函数 返回 的 对 象 名 为 ShallowWrapper， 而 不 是 简单 的 React 元 素 。 这 个 特殊 对 象 提 供 了 一 些 有 
用 的 属性 和 函数 ， 接 下 来 我 们 将 介绍 它们 。 

我 们 开始 修改 测试 代码 ， 先 从 演 染 文本 的 用 例 人 手 。 和 
要 文本 变量 : 









































一 行 代码 保持 不 变 ， 因 为 我 们 仍然 需 


Pu 





CONst. tt 呈 :起 全 福 才 7 


浅 演 染 部 分 更 加 简单 直观 。 原 先 用 TestUtils 需要 三 行 代 码 ， 现 在 只 要 一 行 就 够 了 : 





const button = shallow(<Button text={text} />) 


按钮 就 是 一 个 ShallowWrapper 对 象 ， 接 下 来 我 们 会 在 新 的 预测 语句 中 用 到 其 方法 : 








expect (button.type()).toBe('button') 
expect (button.text ()).toBe (text) 


如 你 所 见 ， 这 里 没有 直接 检查 对 象 属性 ( 随 着 React 的 更 新 ， 属 性 可 能 会 发 生 改变 )， 而 是 
调用 了 抽象 相应 功能 的 工具 函数 。 


type 图 数 返回 泻 染 元 素 的 类 型 ，text 函数 返回 组 件 内 演 染 的 文本 。 在 本 例 中 , 它 就 是 作为 
prop 的 文本 变量 。 


完整 的 测试 如 下 所 示 : 









































test('renders with text', () => { 
const text = 'text' 
const button = shallow(<Button text={text} />) 


expect (button.type()).toBe('button') 
expect (button.text ()).toBe (text) 

}) 

这 比 之 前 简洁 不 少 。 


下 一 步 要 更 新 onclick 事件 处 理 器 的 测试 。 第 一 行 代码 还 是 保持 不 变 : 








const onClick = jest.fnl() 


这 里 仍然 要 用 Jest 创建 mock 函数 ， 以 便 在 预测 代码 中 使 用 spy 功能 。 
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原先 用 renderIntoDocument 在 独立 DOM 中 泻 染 组 件 ， 现 在 蔡 换 为 以 下 方法 : 
const button = shallow(<Button onClick={onClick} />) 


现在 也 不 需要 用 findRenderedDOMComponentwithTag 查找 按钮 组 件 ， 因 为 浅 演 染 已 经 
引用 它 了 。 


模拟 事件 的 语法 和 TestUtils 有些 不 同 ,但 仍然 很 直观 : 








button.simulate('click') 


每 个 ShallowWrapper 对 象 都 有 一 个 simulate 方法 供 我 们 调用 ， 可 以 传人 事件 名 ， 也 可 以 
用 其 他 数据 作为 第 二 参数 。 本 例 不 需要 任何 第 二 参数 ， 不 过 ， 我 们 在 后 文 测 试 表单 时 会 用 到 它 。 











最 后 ， 预 测 语句 保持 原样 : 

expect (onClick) .toBeCalled() 

完成 后 的 代码 如 下 所 示 : 

test('fires the onClick callback', () => { 


const onClick = jest.fn() 
const button = shallow(<Button onClick={onClick} />) 





button.simulate('click') 
expect (onClick) .toBeCalled () 
} 


迁移 到 Enzyme 的 过 程 相对 来 说 比较 简单 ， 同 时 也 提高 了 代码 的 可 读 性 。 
该 库 提供 了 一 些 非常 有 用 的 API, 可 以 查找 诅 套 元 素 或 者 用 选择 器 根据 类 名 和 类 型 查找 元 素 。 





还 有 一 些 方法 可 以 对 props 进行 断言 和 预测 ， 并 为 组 件 注入 任意 状态 和 context 对 象 。 


浅 渔 染 可 以 满足 大 部 分 使 用 场景 , 除了 它 以 外 , 库 还 提供 了 一 个 mount 方法 , 用 于 在 DOM 
中 泻 染 组 件 树 。 





10.5 ”真实 测试 示例 
我 们 编写 了 可 用 的 测试 , 并 清晰 地 理解 了 各 种 工具 和 库 的 用 途 。 接 着 我 们 来 测试 真实 的 组 件 。 


上 文 用 到 的 Button 组 件 实例 值得 参考 , 我 们 应 该 始终 尽量 保持 组 件 简洁 ; 不 过 有 时 也 需要 
实现 各 种 逻辑 和 状态 ， 这 就 给 测试 带 来 了 挑战 。 


我 们 将 要 测试 的 组 件 是 Redux TodoMVC 示例 中 的 TodoTextlnput: 























https://github.com/reactjs/redux/blob/master/examples/todomvce/src/components/TodoTextInput.js 
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直接 将 它 复制 到 Jest 项 目 文件 夹 下 。 


这 个 示例 非常 经 典 , 因为 它 带 有 多 种 props, 类 名 会 随 着 接收 的 props 变化 ,并且 还 有 三 个 
件 处 理 器 ， 我 们 可 以 测试 这 三 个 事件 处 理 器 所 实现 的 逻辑 。 


TodoMVC 示例 代表 了 创建 真实 应 用 的 标准 形式 ， 它 可 以 用 不 同 的 框架 实现 ， 从 而 比较 它们 
的 特性 ， 且 更 方便 开发 人 员 进 行 选 择 。 


该 示例 最 终 完 成 的 是 一 个 很 简单 的 应 用 , 用 户 可 以 添加 待 办 事项 或 标记 已 办 事项 。 我 们 要 关 
注 的 组 件 是 其 中 用 于 添加 和 编辑 事项 的 文本 输入 框 。 


开始 测试 前 应 该 先 快速 介绍 一 下 该 组 件 的 实现 ， 以 便 我 们 能 够 理解 其 功能 。 
首先 ， 用 类 来 定义 该 组 件 : 
class TodoTextInput extends Component 


propTypes 定义 为 类 的 静态 属性 : 








山 


















































static propTypes = { 
onSave: PropTypes.func.isRequired, 
text: PropTypes.string, 
placeholder: PropTypes.string, 
editing: PropTypes.bool, 
newTodo: PropTypes.bool 

} 


要 想 让 Babel 识别 类 属性 ， 需要 使 用 transform-class-properties 插件 可 以 直接 安装 它 : 








npm install --save-dev babel-plugin-transform-class-properties 


然后 将 它 添加 到 .babelrc 中 的 Babel 插件 列表 中 : 











"plugins": ["transform-class-properties"] 
状态 同样 定义 为 一 个 class 属性 : 
state = { 


text: this.props.text || '' 
} 


其 默认 值 为 props 的 文本 属性 或 空 字符 串 。 

然后 是 三 个 事件 处 理 器 ， 它 们 同样 定义 为 class 属性 ， 并 且 用 箭头 函数 来 实现 ， 这 样 就 不 
需要 在 constructor 方法 中 手动 绑 定 this 了 。 

第 一 个 是 submit 事件 处 理 器 : 





























handleSubmit = e => { 
const text = e.target.value.trim() 
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Tf (Ea Witch sse 3 六 
this.props.onSave (text) 
if (this.props.newTodo) { 

this.setState({ text: ' 
} 


"3 


} 


处 理 央 函数 接收 事件 对 象 。 它 会 去 除 目 标 元 素 值 中 多 余 的 空白 字符 ,然后 检查 触发 当前 事件 
的 按键 是 否 为 回 车 键 〈 键 码 13 )， 如 果 满 足 该 条 件 ， 就 将 处 理 过 的 值 传 给 props 上 的 onsave 郴 
数 。 如 果 prop newTodo 为 true， 则 将 状态 重新 设 成 空 字符 串 。 


第 二 个 是 change 事件 处 理 器 : 














handleChange = e => { 
this.setState({ text: e.target.value }) 
} 


除了 定义 为 class 属性 ， 你 应 该 很 熟悉 这 个 方法 了 ， 它 负责 更 新 受 控 输入 元 素 的 状态 。 
最 后 是 plur 事件 处 理 器 : 


handleBlur = e => { 
if (!this.props.newTodo) { 
this.props.onSave (e.target .value) 
} 
} 


当 props 的 newTodo 属性 为 false 时 ， 它 会 用 输入 框 的 值 触发 onsave 函数 。 
现在 定义 rengder 方法 ， 输 入 元 素 上 设置 了 它 的 所 有 属性 : 


























render() { 
return ( 
<input className={ 
classnames ({ 
edit: this.props.editing, 
'new-todo': this.props.newTodo 
})} 
type="text" 


placeholder={this.props.placeholder} 
autoFocus="true" 


value={this.state.text} 
onBlur={this.handleBlur} 
onChange={this.handleChange} 
onKeyDown={this.handleSubmit} /> 





} 


这 里 用 classnames 函数 设置 类 名 。 它 来 自 Jed Watson 开发 的 一 个 非常 有 用 的 库 ， 可 以 很 
方便 地 通过 条 件 逻 辑 设 置 类 名 。 
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接着 设置 type 和 autofocus 这 类 静态 属性 ， 并 用 状态 中 的 text 属性 控制 输入 元 素 的 值 ， 
每 次 改变 都 会 更 新 该 属性 。 最 后 ， 为 元 素 的 事件 属性 绑 定 相应 的 事件 监听 器 。 























开始 前 需要 注意 的 是 , 我 们 要 搞 清 楚 测 试 的 目的 和 原因 。 查 看 这 个 组 件 , 不 难 发 现 哪些 部 分 
需要 重点 测试 。 拿 本 例 来 说 , 可 以 将 它 看 作 从 其 他 团队 接手 的 或 者 加 入 新 公司 时 发 现 的 遗留 代码 。 


以 下 列表 或 多 或 少 地 列 出 了 该 组 件 值得 测试 的 所 有 状态 和 功能 : 


口 用 props 的 值 初始 化 状态 ; 

口 元 素 正 确 使 用 了 blaceholaer 属性 ; 

D 类 名 和 条 件 逻 辑 相 匹配 ; 

口 输入 框 的 值 改 变 时 ， 状 态 会 随 之 更 新 ; 

D onSave 回调 会 由 不 同 的 状态 和 条 件 所 触发 。 

















现在 我 们 开始 编写 代码 ， 创 建 TodoTextInput.spec.js 文件 并 写 入 以 下 语句 : 


import React from 'react' 
import { shallow } from 'enzyme' 
import TodoTextInput from './TodoTextInput' 


这 里 导入 了 React、Enzyme 的 浅 演 染 函数 , 以 及 待 测 组 件 。 男 外 我 们 还 创建 了 一 个 工具 函数 ， 
在 某 些 测试 中 将 它 传递 给 必要 属性 onSave: 




















GONnst;, no0B es .() 
现在 开始 编写 第 一 条 测试 ， 以 检查 元 素 的 默认 值 是 否 为 文本 属性 的 值 : 
test('sets the text prop as value', () => { 

const text = 'text' 


const wrapper = shallow( 
<TodoTextInput text={text} onSave={noop} /> 
) 


expect (wrapper.prop('value')).toBe (text) 


}) 


代码 非常 直观 :创建 文本 变量 ,将 它 传递 给 浅 演 染 的 组 件 。 如 你 所 见 ,这 里 为 必要 属性 onsave 
传递 了 工具 函数 noop， 虽 然 它 没有 实际 用 处 ， 但 如 果 传 人 null，React 会 给 出 警告 。 























最 后 ， 演 染 组 件 并 检查 输出 元 素 的 值 属 性 是 否 与 给 定 文 本 一 致 。 如 果 此 时 在 控制 
npm test 命令 ， 那 么 就 能 看 到 测试 通过 的 提示 : 
PASS ./TodoTextInput.spec.js 


w sets the text prop as value (10ms) 
Test Suites: 1 passed, 1 total 











台中 运行 





一直 





Tests: 1 passed, 1 total 
Snapshots: 0 total 
Time: 1.384s 


Ran all test suites. 
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太 棒 了 ， 我 们 接着 编写 其 他 测试 。 第 二 条 和 第 一 条 类 似 ， 只 不 过 这 次 要 测试 placeholder 











三 
| 
仿 


test('uses the placeholder prop', () => { 
const placeholder = 'placeholder' 


const wrapper = shallow( 
<TodoTextInput placeholder={placeholder} onSave={noop} /> 


) 


expect (wrapper.prop('placeholder')).toBe(placeholder) 


}) 
再 次 运行 npm test, 控制 台 会 提示 两 条 测试 都 通过 了 


现在 我 们 来 研究 一 些 更 有 趣 的 内 容 ， 看 看 传人 某 些 props 后 ， 元 素 是 否 会 新 增 相 应 类 名 : 





test('applies the right class names', () => { 


const wrapper = shallow( 
<TodoTextInput editing newTodo onSave={noop} /> 


) 


expect (wrapper.hasClass('edit new-todqo' ) ) .toBe (true) 


}) 
本 次 测试 为 组 件 添 加 了 editing 和 newTodo 这 两 个 属性 , 然后 在 expect 函数 内 检查 输出 


元 素 是 否 新 增 了 相应 类 名 。 
也 可 以 单独 检查 每 个 类 ， 以 免 它们 相互 影响 ， 你 应 该 理解 这 点 。 
接 下 来 的 测试 更 复杂 ， 因 为 我 们 要 测试 按 下 按键 时 组 件 的 行为 。 
具体 来 说 ， 我 们 要 测试 按 下 Enter 键 时 ， 是 否 会 用 元 素 的 值 调用 onsave 回调 。 








ee 








test('fires onSave on enter', () => { 
const onSave = jest.fn() 
const Value = 'value' 


const wrapper = shallow(<TodoTextInput onSave={onSave} />) 


wrapper.simulate('keydown', { target: { value }, which: 13 }) 


expect (onSave) .toHaveBeenCalledWith (value) 
} 
上 述 代码 先 调用 jest .fn () 创 建 了 一 个 mock 函数 。 接 着 用 值 变 量 保 存 元 素 的 值 , 我 们 还 要 
判断 调用 函数 的 参数 值 是 否 和 它 一 致 。 然 后 泻 染 组 件 ， 并 传人 事件 对 象 来 模拟 按键 事件 。 








二 
本 














mi 
一 、 
站 





事件 对 象 拥有 两 个 属性 : 带 有 一 个 value 属性 的 target 和 which， 前 者 表示 发 生 该 事 
的 元 素 ， 后 者 表示 按键 的 键 码 。 
这 里 需要 预测 的 是 ，mock 回调 函数 onsave 用 事件 值 进行 了 调用 。 
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运行 npm test 会 看 到 目前 的 四 条 测试 都 可 以 通过 。 
还 可 以 编写 一 条 类 似 的 测试 ， 如 果 按 键 键 码 不 是 Enter， 则 什么 也 不 会 发 生 : 


























test('does not fire onSave on key down', () => { 
const onSave = jest.fn!() 
const wrapper = shallow(<TodoTextInput onSave={onSave} />) 


wrapper.simulate('keydown', { target: { value: '' } }) 


expect (onSave) .not .toBeCalled() 
}) 


这 条 测试 和 上 一 条 非常 相似 ， 但 需要 留意 一 下 预测 语句 。 这 里 用 到 了 一 个 新 属性 .nof ， 它 
对 跟 在 自己 后 方 的 函数 进行 反 向 断言 ;以 这 里 的 toBeCalled 为 例 ， 其 结果 应 该 是 false。 


如 你 所 见 ， 编 写 预 测 代码 的 方式 很 接近 口语 。 
五 条 测试 通过 后 ， 就 可 以 开始 编写 下 一 条 : 





























test('clears the value after save if new', () => { 
const Value = 'Value' 
const wrapper = shallow(<TodoTextInput newTodo onSave={noop} />) 


wrapper.simulate('keydown', { target: { value }, which: 13 }) 


expect (wrapper.prop('value')).toBe('') 


}) 
与 前 一 条 测试 不 同 的 是 ， 现 在 元 素 上 多 了 newTodo 属性 ， 它 会 导致 元 素 值 重 置 。 


条 测试 都 通过 的 提示 。 











在 控制 台中 运行 npm test， 我们 会 看 到 六 


以 下 测试 很 常见 : 
test('updates the text on change', () => { 
const Value = 'Value' 


const wrapper = shallow(<TodoTextInput onSave={noop} />) 
wrapper.simulate('change', { target: { value } }) 


expect (wrapper.prop('value')) .toBel(value) 


}) 

它 检查 受 控 输 入 元 素 是 否 正 常 工作 , 如 果 回 想 一 下 第 6 章 中 曾 讨论 过 的 内 容 , 你 就 知道 应 用 
内 的 所 有 表单 都 要 有 这 样 的 测试 。 

模拟 change 事件 ， 并 传人 预 设 的 值 变 量 ， 然后 检查 输出 元 素 的 Value 属性 是 否 与 它 相 等 。 




















现在 已 经 有 七 条 测试 可 以 通过 了 ， 还 需要 完成 一 条 。 
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最 后 一 条 测试 用 于 检查 ， 当 没有 新 待 办 事项 时 ， 才 会 触发 blur 事件 的 回调 : 


test('fires onSave on blur if not new', () => { 
const onSave = jest.fn() 
const Value = 'value' 


const wrapper = shallow(<TodoTextInput onSave={onSave} />) 
wrapper.simulate('blur', { target: { value } }) 


expect (onSave) .toHaveBeenCalledWith (value) 
} 


创建 mock 函数 和 期 望 值 ， 用 target 属性 模拟 plur 
onSave 回调 。 


现在 运行 npm test， 所 有 测试 应 该 都 能 通过 ， 这 份 列表 已 经 很 长 了 : 








中 


事件 ， 然 后 检查 是 否 用 给 定 值 调 用 过 








PASS ./TodoTextInput.spec.js 

sets the text prop as value (10ms) 
uses the placeholder prop (lms) 
applies the right class names (lms) 
fires onSave on enter (3ms) 

does not fire onSave on key down (lms) 
clears the value after save if new (5ms) 
updates the text on change (lms) 

fires onSave on blur if not new (2ms) 
Test Suites: 1 passed, 1 total 

Tests: 8 passed, 8 total 

Snapshots: 0 total 

Time: 2.271s 

Ran all test suites. 


非常 好 ,我 们 用 测试 覆盖 了 组 件 。 如 果 需 要 重 构 、 修 改 或 者 新 增 特 性 ， 这 些 测 试 会 帮助 我 们 
发 现 新 代码 是 否 会 破坏 任何 旧 的 功能 。 

这 使 我 们 对 自己 的 代码 更 有 信心 , 不 必 担 心 失误 会 导致 代码 回 退 , 可 以 放心 地 修改 任何 一 行 
代码 了 。 


<““““、“、 习 
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我 们 已 经 见识 过 真实 的 测试 示例 , 但 你 可 能 会 觉得 花费 大 量 时 间 为 单个 组 件 编写 这 么 多 测试 
并 不 值得 。 

检查 文本 、 值 还 有 类 名 的 各 种 状态 十 分 耗 时 费力 ， 履 盖 所 有 实例 还 需要 大 量 代 码 。 然 而 大 多 


数 时候 ， 测 试 组 件 的 最 重要 作用 就 是 输出 结果 要 正确 ， 并 且 不 会 意外 改变 。Jest 引入 了 一 项 名 为 
快照 测试 的 新 特性 来 解决 这 个 问题 。 
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快照 就 是 特定 时 间 传人 某 些 props 后 的 组 件 的 照片 。 每 次 运行 测试 时 ，Jest 会 创建 新 的 照片 ， 
并 与 上 一 次 的 进行 比较 ， 以 检查 是 否 有 所 变化 。 


快照 内 容 由 react-test-render r 包 的 render 方法 输出 ， 可 以 用 以 下 命令 来 安装 这 个 包 ; 





npm install --save-dev react-test-renderer 


安装 完毕 后 ， 新 建文 件 TodoTextInput-snapshot.spec.js， 写 人 下 列 必 人 语句: 


import React from 'react' 
import renderer from 


import TodoTextInput from 


'react-test-renderer' 


'./TodoTextInput' 








我 们 导入 React 来 使 用 JSX 语法 ，renderer 负责 创建 生成 快照 所 需 的 组 件 树 ， 最 后 一 个 是 


待 测 的 目标 组 件 。 


现在 所 有 依赖 准备 就 绕 ， 我 们 开始 编写 


test('snapshots are awesome', () 








个 简单 的 测试 : 














二 入 


第 一 行 代码 用 前 面 导 入 的 renderer 泻 染 组 件 : 





const component 


<TodoTextInput onSave={() 


) 


上 述 代码 会 返回 组 件 的 实例 ， 


ee ns = 二 和 一 





= renderer.createl 


=> {}} /> 


该 组 件 有 一 个 特殊 方法 toJsoN， 我 们 接着 调用 它 : 


component .toJSON () 


tree 变量 保存 原 有 组 件 返 回 的 React 元 素 ，Jest 会 用 它 生 成 快照 ， 以 便 后 续 进 行 比较 。 
如 果 将 tree 变量 输出 到 控制 台中 ， 它 的 样子 如 下 所 示 : 


{ type: 'input', 
props: 

{ className: '', 
type: 'text', 
placeholder: undefined, 
autoFocus: 'true', 
Value: '', 
onBlur: [Function], 
onChange: [Function], 
onKeyDown: [Function] }, 


children: null } 























最 后 ， 编 写 预 测 语句 检查 tree 变量 的 内 容 是 否 匹 配 先 前 保存 的 快照 





expect (tree) .toMatchSnapshot () 


第 一 次 用 npm test 命令 运行 测试 时 ， 快 照 是 全 新 创建 的 ， 保 存在 _snapshots 文件 夹 下 。 
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/ 


该 文件 夹 下 的 每 个 文件 都 表示 一 张 快照 。 快 照 文件 中 保存 的 泻 染 输出 结果 不 是 React 元 素 对 
象 ， 而 是 可 读 性 更 好 的 版 本 : 





exports[ ‘test snapshots are awesome 1 `] = 、 
<input 

autoFocus="true" 

className="" 

onBlur={[Function]} 

onChange={[Function]} 

onKeyDown={ [Function]} 

placeholder={undefined} 

type="text" 

value="" /> 


了 


回 到 测试 , 为 组 件 添 加 editing 属性 , 并 再 次 执行 npm test 命令 , 控制 台 会 给 出 以 下 响应 : 














FAIL ./TodoTextInput-snapshot.spec.js 
® snapshots are awesome 

expect (value) .toMatchsnapshot () 

Received value does not match stored snapshot 1. 

- Snapshot 

+ Received 

@@ -1,8 +1,8 @@ 

<input 
autoFocus="true" 

- className="" 

+ ClassName="edit" 
onBlur={[Function]} 
onChange={[Function]} 
onKeyDown={[Function]} 
placeholder={undefined} 
type="text" 


它 向 我 们 展示 了 本 次 快照 有 什么 变化 。 具体 来 说 ， 就 是 className 属性 之 前 为 空 ， 而 现在 
多 了 字符 串 edit。 


再 往 下 我 们 还 会 看 到 这 条 信 ， 




















[ 亚 


> 














Inspect your code changes or run with npm test -- -u to update them. 


(审查 代码 中 的 改动 ， 或 者 执行 npm test -- -u 来 更 新 代码 。) 


快照 使 开发 者 体验 变 得 极其 流畅 ; 只 要 一 个 简单 的 标记 , 我 们 就 能 确认 新 的 快照 是 否 对 应 组 
件 的 正确 版 本 。 执 行 npm test -- -u 可 以 自动 更 新 快照 。 


如 果 组 件 被 错误 地 修改 了 ,我们 可 以 回 到 代码 中 修复 它 。 


如 你 所 见 , 快照 测试 是 一 项 很 强大 的 特性 ,能 够 简化 组 件 测试 , 使 开发 人 员 无 须 编写 测试 覆 
盖 所 有 组 件 状 态 ， 大 大 节约 了 时 间 。 
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10.7 ”代码 覆盖 率 工 具 
编写 测试 的 原因 很 多 , 我 们 已 经 在 前 面 介绍 了 一 部 分 。 其 中 最 主要 的 原因 就 是 能 始终 为 代码 
贡献 价值 ， 使 其 更 稳健 。 
因为 这 一 点 , 我 始终 对 统计 测试 用 例 数 量 、 代 码 行 数 以 及 测试 覆盖 率 持 怀疑 态度 。 我 建议 大 
家 不 要 将 重点 放 在 数量 上 ， 而 应 该 注重 测试 能 提供 什么 价值 。 
但 在 有 些 场 景 下 , 获取 覆盖 率 指标 以 及 追踪 测试 用 例 数 量 还 是 有 用 的 。 在 包含 许多 不 同 模块 
的 大 型 项 目 中 ， 这 样 做 更 便于 定位 没有 经 过 充分 测试 ， 甚 至 从 未 测试 过 的 那些 文件 。 
再 次 强调 ，Jest 为 你 提供 了 运行 测试 所 需 的 一 切 工具 ， 当 然 ， 它 也 提供 了 测量 并 保存 代码 覆 
盖 率 信息 的 功能 。 
它 用 到 了 Istanbul ， 这 是 最 流行 的 代码 覆盖 率 库 之 一 ， 如 果 使 用 的 是 Mocha， 那 么 你 需要 自 
己 手动 安装 这 个 库 。 
运行 Jest 的 代码 覆盖 率 功 能 非常 简单 :只 需要 在 npm 脚本 的 Jest 命令 后 面 加 上 - coverage 
标记 即 可 。 你 也 可 以 在 packagejson 中 为 Jest 创建 配置 , 并 将 collectCoverage 选项 设 为 true: 














































































































ES { 
"collectCoverage": true 


} 
再 次 执行 npm test, 现在 你 会 在 控制 台中 看 到 不 一 样 的 输出 , 即 一 张 显 示 覆 盖 率 信息 的 表格 : 








如 你 所 见 , 我 们 的 代码 文件 几乎 被 完整 覆盖 了 。 第 一 列 显示 覆盖 了 多 少 条 语句 ; 第 二 列 显示 
了 条 件 语句 的 不 同 分 支 的 覆盖 率 ; 第 三 列表 示 测 试 过 多 少 函数 ; 第 四 列 显 示 了 测试 覆盖 的 代码 行 
数 。 最 后 一 列 目前 为 空 ， 用 于 表示 测试 没有 覆盖 的 代码 行 数 ， 当 我 们 想 快速 找到 代码 中 需要 更 多 
关注 的 部 分 时 ， 这 列 信息 就 非常 有 用 了 。 


目前 唯一 没有 达到 100% 覆 盖 率 的 只 有 分 支 一 列 ， 实 际 上 ， 我 在 最 后 一 条 测试 中 故意 没有 履 
盖 一 个 分 文 ， 以 便 我 们 可 以 一 起 来 实现 完整 的 覆盖 率 。 


打开 TodoTextInput.js 文件 ， 并 查看 onBlur 处 理 器 ， 你 会 注意 到 它 包 含 两 个 分 文 : 


























handleBlur = e => { 
if (!this.props.newTodo) { 
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this.props.onSave (e.target .value) 
} 
} 


如 果 待 办 事项 不 是 新 增 的 ，onSave 函数 会 被 输入 框 的 当前 值 调用 ;而 如 果 待 办 事项 是 新 增 
的 ， 则 什么 也 不 会 执行 。 


我 们 只 测试 了 前 一 条 最 为 明显 的 路 径 , 但 往往 测试 所 有 不 同 路 径 是 很 有 价值 的 , 这 样 可 以 确 
保 组 件 在 一 切 情况 下 都 能 正常 工作 。 


回 到 TodoTextInput.spec.js 中 ， 并 新 增 一 条 测试 : 















































test('does not fire onSave on blur if new', () => { 
const onSave = jest.fn() 
const wrapper = shallow( 
<TodoTextInput newTodo onSave={onSave} /> 
) 


wrapper.simulate('blur') 


expect (onSave) .not .toBeCalled() 
} 


这 条 测试 和 文件 中 的 上 一 条 很 相似 ， 只 不 过 这 里 是 向 组 件 传 人 newTodo 属性 ， 然 后 再 检查 
onSave 回调 是 否 被 调用 。 


如 果 再 次 执行 npm test， 我 们 会 看 到 表格 的 每 列 都 达到 了 100%。 









































10.8 ”常用 测试 方案 
接 下 来 是 有 关 测 试 的 最 后 一 节 内 容 ， 我 们 将 了 解 测试 一 些 复杂 组 件 时 应 该 掌握 的 常用 模式 。 


现在 你 应 该 很 熟悉 组 件 测试 了 ,也 应 该 掌握 了 为 应 用 编写 测试 的 所 有 知识 。 然而， 有 时 很 难 
找到 最 佳 测 试 策略 ， 如 高 阶 组 件 。 


























10.8.1 测试 高 阶 组 件 


前 文 提 过 , 我 们 可 以 用 高 阶 组 件 在 应 用 的 不 同 组 件 间 共 享 功能 。 高 阶 组 件 就 是 函数 ,它们 接 
收 组 件 并 返回 增强 后 的 版 本 。 


因为 这 类 组 件 测试 起 来 没有 简单 组 件 那么 直观 ， 所 以 值得 我 们 一 起 学 习 一 些 常 用 方案 


接 下 来 要 测试 的 目标 组 件 是 第 5 章 中 创建 的 高 阶 组 件 withDpata。 我 们 会 对 它 获取 数据 的 方 
式 进行 一 些小 小 的 改动 。 
































200 第 10 章 ”测试 与 调试 





withData 图 数 具 有 以 下 特点 : 
const withData = URL => Component => (...) 


该 函数 接收 数据 加 载 路 径 的 URL， 并 将 这 项 数据 传 给 目标 组 件 。URL 参数 可 以 是 接收 当前 
props 对 象 的 函数 ， 也 可 以 是 静态 字符 串 。 


withData 图 数 返回 如 下 定义 的 类 : 





class extends React .Component 
在 constructor 方法 中 初始 化 数据 : 


constructor(props) { 
super (props) 





this.state = { data: [] } 














生命 周期 钩子 componentDiqMount 负责 加 载 数 据 : 


componentDidMount() { 
const endpoint = typeof url === 'function' 
3 UL(ENIS DESGOS) 
27 长 赴 





getJSON (endpoint) .then(data => this.setState({ data })) 
} 


如 你 所 见 ， 这 里 和 第 5 章 中 的 示例 稍 有 不 同 ， 我 们 没有 直接 使 用 获取 函数 ， 而 是 调用 了 
getJSON 函数 ， 这 样 便于 你 学 习 如 何 模 拟 外 部 模块 。 


另外 , 最 佳 实践 要 求 将 第 三 方 库 和 API 调用 封装 或 抽象 到 独立 模块 中 , 以 便 在 测试 时 隔离 组 
件 及 其 依赖 。 

在 文件 顶部 导入 getJSON 函数 : 

import getJSON from './get-json' 

它 返回 promise 对 象 ， 其 中 包含 了 请 求 路 径 返 回 的 JSON 数据 。 

最 后 ， 展 开 props 和 状态 对 象 ， 调 用 rengder 泻 染 目标 组 件 : 

render() { 

return <Component {...this.props} {...this.state} /> 

} 

现在 ,我 们 想 要 用 测试 覆盖 这 个 函数 的 地 方 和 之 前 有 些 不 同 ， 先 从 最 简单 的 开始 。 举 个 简单 
的 例子 ， 检 查 增强 后 的 组 件 接 收 到 的 props 是 否 正确 传递 给 了 目标 组 件 。 


接 下 来 测试 根据 URL 生成 请 求 路 径 的 逻辑 ， 看 看 它 是 否 适用 于 函数 和 静态 字符 串 这 两 种 情况 。 
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最 后 我 们 要 测试 的 是 ， 一旦 getJSON 函数 返回 数据 ， 目 标 组 件 就 能 接收 到 它 。 
先 在 测试 文件 中 加 载 所 有 依赖 : 

import React from 'react' 

import { shallow, mount } from 'enzyme' 


import withData from './with-data' 
import getJSON from './get-json' 


这 里 同时 导入 了 Enzyme 的 shallow 函数 和 mount 函数 ,因为 这 几 个 简单 测试 不 需要 DOM 
就 能 运行 ， 另 外 要 用 mount 函数 测试 生命 周期 钩子 做 了 什么 。 


接着 创建 测试 过 程 要 用 到 的 一 些 变量 : 





'data' 
(On: EE dL A 


const data 
const List 


data 变量 就 是 模拟 数据 ， 用 于 检查 获取 到 的 数据 是 否 正 确 地 传 给 了 组 件 ， 此 外 还 有 一 个 空 
的 List 组 件 。 























测试 高 阶 组 件 时 , 创建 空 组 件 是 很 常见 的 做 法 ， 因 为 我 们 要 增强 一 个 目标 组 件 , 这 样 才 能 判 
断 所 有 特性 是 否 都 能 正常 运行 。 


接 下 来 是 最 难 ， 也 最 强大 的 部 分 : 








jest.mock('./get-json', () => ( 
jest.fn(() => ({ then: callback => callback (data) })) 
) ) 


之 前 提 过 要 用 外 部 模块 来 获取 数据 。 我 们 不 希望 加 载 真 实数 据 ， 最 重要 的 是 ,我 们 不 希望 外 
部 模块 因为 某 些 原因 不 可 用 ， 进 而 导致 测试 失败 。 用 Jest 就 可 以 很 方便 地 隔离 并 模拟 依赖 。 


调用 jest .mock 函数 ， 让 测试 框架 将 外 部 模块 替换 成 作为 第 二 个 参数 的 函数 。 该 函数 返回 
jest .fn 创建 的 mock 函数 ，mock 函数 会 返回 类 似 promise 的 对 象 ， 只 不 过 这 个 对 象 是 同步 的 。 
它 拥 有 then 函数 ， 后 者 可 以 触发 接收 的 回调 并 传人 前 面 定 义 的 伪 数 据 。 


从 现在 起 ， 我 们 就 可 以 对 高 阶 组 件 进行 单元 测试 ， 无 须 担 心 getJSON 函数 的 行为 或 bug。 
现在 我 们 准备 开始 编写 真正 的 测试 ， 第 一 条 将 检查 props 是 否 正 确 地 传 给 了 目标 组 件 : 























test('passes the props to the component', () => { 
const ListWithGists = withData() (List) 
const username = 'gaearon,' 


const wrapper = shallow(<ListWithGists username={username} />) 


expect (wrapper.prop('username')).toBe(username) 


} 
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代码 清晰 易 懂 ， 不 过 我 们 还 是 一 起 来 详细 解读 一 下 。 首 先 ， 我 们 将 空 组 件 List 传 给 了 高 阶 
组 件 并 增强 ， 然 后 定义 一 个 prop 传 给 组 件 ， 接 下 来 进行 浅 演 染 。 











最 后 ， 检 查 输出 结果 是 否 有 值 相 同 的 prop。 非 常 好 ， 此 时 执行 npm test 命令 会 看 到 第 
条 测试 通过 。 

接 下 来 的 测试 需要 将 组 件 挂 载 进 独立 DOM ,我们 先 检查 函数 和 静态 字符 串 形式 的 URL 参数 
是 否 都 可 用 。 毅 态 字 符 串 测试 起 来 很 简单 : 








test('uses the string url', () => { 
const url = 'https://api.github.com/users/gaearon/gists' 
const withGists = withData (url) 
const ListWithGists = withGists (List) 





mount (<ListWithGists />) 


expect (getJSON) .toHaveBeenCalledWitnh (url) 
}) 


定义 url 变量 ， 并 用 偏 函 数 写 法 生成 新 函数 ; 接着 用 这 个 函数 增强 List 组 件 。 





























然后 挂 载 组 件 , 并 检查 是 否 用 传人 的 URL 调用 了 getJSON 函数 。 很 简单 : 两 条 测试 都 通过 了 。 




















现在 我 们 来 检查 URL 函数 是 否 可 用 : 





test('uses the function url', () => { 
const url = jest.fn(props => ( 
‘https://api.github.com/users/s{props.username}/gists. 
) 
const withGists = withData (url) 
const ListWithGists = withGists (List) 
const props = { username: 'gaearon' } 





mount (<ListWithGists {...props} />) 


expect (url) .toHaveBeenCalledWith (props) 
expect (getJSON) .toHaveBeenCalledWitn!( 
'https://api.github.com/users/gaearon/gists' 





) 
}) 


先 用 Jest 的 mock 功能 生成 URL 函数 ， 以 便 为 它 编写 预测 ， 然 后 增强 List 组 件 并 定义 传 给 
它 的 props。 

结尾 是 两 条 预测 语句 : 
口 第 一 条 检查 是 否 用 给 定 的 props 调用 了 URL 函数 ; 
口 第 二 条 再 次 检查 是 否 用 正确 的 请 求 路 径 触 发 了 getJSON 函数 。 
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最 后 一 条 测试 用 于 检查 返回 给 getJSON 模块 的 数据 是 否 正确 地 传 给 了 目标 组 件 : 


test('passes the data to the component', () => { 
const ListWithGists = withData() (List) 


const wrapper = mount (<ListWithGists />) 


expect (wrapper.prop('data')).toEqual (data) 
} 


上 述 代 码 先 用 高 阶 组 件 增强 了 List 组 件 ， 然 后 挂 载 组 件 并 保存 封装 器 的 引用 。 接 着 在 挂 载 
的 封装 器 中 查找 List 组 件 ， 并 检查 它 的 data 属性 是 否 与 请 求 获取 的 数据 一 致 。 






































再 次 执行 npm test 命令 ， 我 们 会 看 到 四 条 测试 都 通过 了 。 

















10.8.2 页面 对 象 模式 


现在 我 们 来 看 看 ， 当 组 件 树 变 得 更 复杂 ,而 且 有 多 层 骨 套 的 子 组 件 时 ， 有 哪些 常见 的 测试 纺 
写 方式 。 


接 下 来 的 示例 要 用 到 第 6 章 中 创建 的 受 控 表 单 组 件 : 

















class Controlled extends React .Component 


我 们 先 来 快速 浏览 一 遍 它 的 功能 来 回顾 其 工作 原理 ， 然 后 再 谈 测试 。 
constructor 方法 初始 化 了 状态 并 绑 定 了 事件 处 理 需 : 


constructor(props) { 
super (props) 


this.state = { 
firstName: 'Dan', 
lastName: 'Abramov', 


} 


this.handleChange 
this.handleSubmit 
} 


handleChange 处 理 兢 负责 更 新 状态 中 的 输入 框 的 值 : 


handleChange({ target }) { 
this.setState({ 
[target .name] : tardget .value， 
} 


此 外 还 有 handqlesubmit 处 理 器 , 它 会 调用 事件 对 象 的 breventDefault 函数 来 禁用 提交 


this.handleChange.bind (this) 
this.handleSubmit.bind(this) 
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表单 时 的 浏览 器 的 默认 行为 。 
原 示 例 中 没有 onSubmit 这 


handleSubmit(e) { 
e.preventDefault() 


然后 调用 父 


this.props.onSubmit( 


组 件 传 来 的 onSubmit 
函数 ， 不 过 现在 我 们 要 用 它 展示 如 何 正确 测试 组 件 : 


函数 ， 并 传人 拼接 过 的 输入 值 。 





‘$s{this.state.firstName} S${this.state.lastName}. 


) 
} 


最 后 ， 用 render 方法 定义 输入 村 


render() { 
return ( 
<form onSubmit={this.handleSubmit}> 
<input 
type="text" 
name="firstName" 
value={this.state.firstName} 
onChange={this.handleChange} 
/> 
<input 
type="text" 
name="]lastName" 
value={this.state.lastName} 
onChange={this.handleChange} 
/> 
<button>Submit</button> 
</form> 





HH 











这 里 要 测试 的 一 项 基本 功能 是 , 在 输入 框 中 输入 内 容 并 提交 表单 将 会 





回调 。 





现在 你 应 该 很 清楚 如 何 用 Enzyme 编写 测试 来 覆盖 这 


test('submits the form', () => { 


一 开始 先 用 Jest 定义 模拟 的 onsubmit 


const onSubmit = 
const wrapper = 


然后 找到 第 


jest.fn() 





一 个 输入 框 ， 触 发 它 的 change 


const firstName = wrapper.find(' 
firstName.simulatel 
'change', 
{ target: 


性 


{ name: 'firstName', value: 





并 绑 定 处 理 器 函数 : 


用 输入 值 触发 onSubmit 


文 种 场景 ， 我 们 来 一 起 看 看 : 





函数 ， 挂 载 组 件 并 保存 封装 器 的 引用 : 


shallow(<Controlled onSubmit={onSubmit} />) 


人 件 ， 并 传人 我 们 想 要 更 新 的 值 : 


[name="firstName"]') 





'Christopher' } } 
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第 二 个 输入 框 同 理 : 


const lastName = wrapper.find(' [name="lastName"]') 
lastName.simulatel( 

'change', 

{ target: { name: 'lastName', value: 'Chedeau' } } 


) 
输入 框 都 更 新 完毕 后 ， 模 拟 提 交 表 单 


hl 





有 件 : 


const form = wrapper.find('form') 
form.simulate('submit', { preventDefault: () => {} }) 


现在 我 们 来 编写 预测 语句 : 

expect (onsubmit) .toHaveBeenCalledWith('Christopher Chedeau') 
记得 闭合 测试 代码 块 : 

局 


在 控制 台 执行 npm test 会 显示 测试 通过 的 提示 ， 这 正 是 我 们 所 期 望 的 ; 但 如 果 再 看 看 测试 
的 实现 ， 你 就 能 轻易 发 现 其 中 的 一 些 问题 和 潜在 的 优化 点 。 





























最 明显 的 地 方 就 是 填充 输入 框 的 代码 重复 了 ， 只 是 有 些 变量 不 同 。 这 种 代码 太 繁 瑞 ， 更 重要 
的 是 ， 它 和 标记 结构 耦合 了 。 




















如 果 这 种 测试 很 多 , 那么 只 要 标记 发 生 改 变 , 就 要 修改 文件 许多 部 分 的 代码 。 如 果 去 除 重复 ， 
并 将 选择 带 移 到 同一 个 地 方 ， 表 单 改变 时 修改 选择 带 会 更 方便 ,这样 做 不 是 更 好 吗 ? 








这 里 页 面 对 象 模式 就 能 派 上 用 场 了 。 如 果 我 们 创建 一 个 页 面 对 象 来 表示 页 面 元 素 , 并 隐藏 先 
择 器 ， 再 用 它 填充 表单 并 提交 ， 这 样 做 有 很 多 好 处 ， 也 避免 了 代码 重复 。 





客观 来 说 ， 在 测试 中 应 用 DRY 原则 往往 不 是 最 好 的 做 法 ， 因 为 这 可 能 会 引发 更 多 bug 并 提 
升 复杂 度 ， 不 过 就 本 例 而 言 ， 这 么 做 是 很 有 价值 的 。 


我 们 来 看 看 页 面 对 象 模式 如 何 改进 受 控 表单 的 测试 。 
首先 ， 用 类 创建 一 个 Page 对 象 : 


























class Page 


类 的 constructor 方 法 从 Enzyme 接 收 顶 层 的 wrapper 变量 并 保存 ,以 便 接 下 来 可 以 使 用 : 


constructor (WwWrapper) { 
this.wrapper = wrapper 


} 
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接着 定义 一 个 通用 函数 来 填充 输入 框 ， 该 函数 接受 name 和 value 参数 ,然后 触发 change 
件 : 


fill(name, value) { 
const field = this.wrapper.find(. [name="$ {name}"].) 
field.simulate('change', { target: { name, value } }) 


} 
实现 submit 函数 ， 以 便 对 查找 按钮 以 及 模拟 浏览 需 事 件 的 部 分 进行 抽象 : 





hl 








submit() { 
const form = this.wrapper.find('form') 
form.simulate('submit', { preventDefault() {} }) 


} 
现在 可 以 按 以 下 方式 重 写 原来 的 测试 了 : 
test('submits the form with the page object', () => { 


const onSubmit = jest.fn() 
const wrapper = shallow(<Controlled onSubmit={onSubmit} />) 








const page = new Page (wrapper) 
page.fill('firstName', 'Christopher') 
page.fill('lastName', 'Chedeau') 
page.submit () 


expect (onSubmit) .toHaveBeenCalledWith('Christopher Chedeau') 
I 


如 你 所 见 ， 这 里 创建 了 页 面 对 象 的 实例 ， 我 们 用 它 的 函数 填充 输入 框 并 提交 表单 。 


页 面 对 象 使 代码 变 得 更 简洁 , 没有 多 余 的 重复 。 如 果 组 件 发 生 了 改变 , 我 们 不 必修 改 多 个 测 
试 ， 只 要 简单 直观 地 修改 页 面 对 象 的 工作 方式 即 可 。 








10.9 React 开发 者 工具 


只 在 控制 台中 进行 测试 还 不 够 ， 我 们 想 要 检查 应 用 在 浏览 器 中 的 运行 情况 ， 此 时 可 以 使 用 
React 开发 者 工具 。 


这 个 工具 是 一 个 Chrome 扩展， 可 以 从 以 下 URL 安装 











https:/chrome.google.com/webstore/detalilreactrdeveloper-tools/fmkadmapgofadopljbj 全 apd- 


koienihli2hl=en 


安装 完成 后 ，Chrome 开发 者 工具 会 多 出 一 个 React 标签 页 ， 你 可 以 在 这 里 审查 演 染 的 组 件 
树 ， 也 可 以 检查 组 件 在 特定 时 间 的 内 部 状态 与 接收 的 属性 。 


可 读 取 props 和 状态 对 象 ， 也 可 以 实时 修改 它们 以 触发 UI 更 新 并 直接 查看 结果 。 
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这 是 一 个 必 备 工具 ， 最 新 的 版 本 还 新 增 了 一 项 特性 ， 勾 选 Trace React Updates 选 框 即 可 
启用 。 


启用 这 项 功能 后 , 就 可 以 在 使 用 应 用 时 直观 地 看 到 执行 某 个 特殊 操作 会 更 新 哪个 组 件 。 更 新 
后 的 组 件 会 用 红色 矩形 框 高 亮 显示 ， 这 样 就 能 很 方便 地 定位 需要 优化 的 地 方 。 

















10.10 ”React 错误 处 理 


即便 代码 写 得 很 完美 ,也 获 盖 了 完整 的 测试 ,但 错误 仍然 会 出 现 。 不 同 的 浏览 器 和 环境 ， 以 
及 真实 用 户 数据 都 是 我 们 无 法 控制 的 因素 ,它们 有 时 会 导致 代码 运行 出 错 。 作 为 开发 人 员 , 我 们 
必须 接受 这 一 点 。 

应 用 出 现 问题 时 ， 最 好 的 解决 办 法 是 : 


口 通知 用 户 ， 帮 助 他 们 理解 发 生 了 什么 情况 ， 并 告诉 他 们 应 该 怎么 做 ; 
D 收集 与 错误 相关 的 一 切 信息 以 及 应 用 状态 ， 以 便 快速 重 现 并 修复 bug。 


React 的 错误 处 理 方式 一 开始 会 让 人 觉得 有 些 违 反 直觉 。 
































假设 我 们 有 以 下 组 件 : 
const Nice => <div>Nice</div> 
以 及 : 
Const EviL.S “( 
<div> 
Evil 
{this.does.not .exist} 
</div> 


) 
将 以 下 App 组 件 泻 染 进 DOM， 我 们 看 看 会 发 生 什么 事情 : 


const App = () => ( 
<div> 
<Nice /> 
<EVvil /> 
<Nice /> 
</div> 


) 





























举例 来 说 ,我 们 可 能 认为 第 一 个 Nice 组 件 能 成 功 泻 染 ， 接 着 Evil 组 件 抛 出 异常 ， 这 会 导 
致 演 染 停止 。 或 者 说 两 个 Nice 组 件 都 能 泻 染 ， 而 Evil 组 件 不 会 。 但 实际 情况 是 屏幕 上 什么 都 





不 会 显示 。 
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在 React 中， 如 果 单 个 组 件 抛 出 异常 ， 那 么 它 就 会 停止 演 染 整 棵 树 。 这 种 决策 是 为 了 提升 安 
全 性 ， 同 时 也 避免 了 状态 不 一 致 。 


如 有 果 异 常 组 件 泻 染 失败 , 将 它 隔离 ,然后 再 泻 染 组 件 树 的 其 他 部 分 , 这 样 做 是 不 是 更 好 呢 ? 
唯一 可 能 实现 这 种 效果 的 方式 就 是 给 泻 染 方法 加 上 猴子 补丁 ， 将 它 封装 进 try. . .catch 语句 
中 。 这 显然 是 很 糟糕 的 做 法 ， 应 该 极力 避免 ; 不 过 某 些 情况 下 可 以 将 它 用 于 测试 。 























react-component-errors 库 会 给 所 有 的 组 件 方 法 加 上 猴子 补丁 ,并 封装 到 Ot leo 
语句 中 ， 这 样 就 不 会 导致 整 棵 树 演 染 失败 。 


























这 种 做 法 在 性 能 与 库 的 兼容 性 方面 有 一 定 缺陷 ,不 过 只 要 理解 其 中 的 风险 , 你 就 可 以 选用 它 。 


先 执行 以 下 命令 来 安装 这 个 库 : 





npm install --save react-component-errors 
接着 将 它 导 入 组 件 文件 : 
import wrapReactLifecycleMethods from 'react-component-errors' 


然后 用 它 装饰 类 : 





@wrapReactLifecycleMethods 
class MyComponents extends React.Component 


这 个 库 不 仅 可 以 避免 单个 组 件 异 常 导致 整 棵 树 泻 染 失败 , 还 提供 了 设置 自 定义 错误 处 理 圳 的 
方式 ,并且 可 以 在 出 现 异常 时 获取 有 用 的 信息 。 


我 们 需要 从 包 中 导入 config 对 象 ， 如 下 所 示 : 














import { config } from 'react-component-errors' 


接着 按 以 下 方式 设置 自 定义 错误 处 理 天 : 





config.errorHandler = errorReport => { ... } 
定义 为 errorHandler 的 函数 会 接收 错误 报告 ， 其 中 包含 了 重 现 并 修复 错误 所 需 的 信息 。 


除了 原生 错误 对 象 , 该 报告 还 为 我 们 提供 了 组 件 名 与 触发 问题 的 函数 名 。 此 外 ,， 它 还 提供 了 
组 件 接收 的 所 有 props。 这 些 信息 足够 用 来 编写 测试 、 重 现 问 题 并 快速 修复 。 














值得 强调 的 是 , 这 个 库 所 用 的 技巧 应 该 予以 避免 ,因为 它 可 能 会 使 应 用 出 现 某 些 问 题 。 最 重 
要 的 是 ， 生 产 环 境 下 应 该 禁用 它 。 

















人 原文 为 monkey-patch， 


1 体 解 释 可 查看 dongcia 在 简 书 上 的 文章 “猴子 补丁 "” 。 一 一 译 者 注 
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10.11 小结 
本 章 介 绍 了 测试 的 好 处 ， 以 及 可 以 用 来 覆盖 React 组 件 测试 的 框架 。Jest 是 一 个 功能 完整 的 
工具 ， 而 Mocha 人 允许 你 定制 体验 。 


TestUtils 允许 你 在 浏览 器 外 泻 染 组 件 。Enzyme 是 一 个 强大 的 工具 ， 可 以 在 测试 中 访问 泻 染 
输出 的 结果 。 我 们 还 探讨 了 如 何 用 mock 测试 组 件 ， 以 及 如 何 编写 预测 代码 。 


我 们 还 学 到 了 快照 测试 能 使 组 件 输出 的 测试 变 得 更 简单 , 它 的 代码 覆盖 率 工具 也 能 帮助 我 们 
监控 代码 库 的 测试 状况 。 


你 需要 牢记 常见 的 复杂 组 件 测试 方案 , 当 遇 到 高 阶 组 件 或 者 表单 包含 多 层 髓 套 的 元 素 时 , 它 
们 就 能 派 上 用 场 了 。 


最 后 ， 我 们 学 习 了 React 开 发 者 工具 对 测试 的 帮助 ， 以 及 如 何在 React 中 实现 错误 处 理 。 
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你 已 经 在 本 书 中 学 习 了 如 何 应 用 最 佳 实践 来 编写 React 应 用 。 我 们 在 第 1 章 中 回顾 了 基本 概 
念 以 巩固 扎实 的 理解 ， 后面 的 章节 介绍 了 一 些 更 高 级 的 技巧 。 


现在 你 应 该 能 够 开发 可 复 用 组 件 , 使 组 件 之 间 可 以 通信 , 并 知道 如 何 优 化 应 用 的 组 件 树 以 达 
到 最 优 性 能 。 然 而 ， 开 发 人 员 也 会 犯错 ， 本 章 将 介绍 使 用 React 时 应 该 避免 的 常见 反 模 式 。 


了 解 稼 见 错误 有 助 于 你 避 开 它们 ， 并 且 能 够 增进 你 对 React 的 工作 原理 的 理解 ， 从 而 掌握 
我 们 都 提供 了 示例 来 说 明 如 何 重 现 和 解决 。 





React 应 用 的 开发 方式 。 对 于 每 个 问题 ， 
本 章 包 含 如 下 内 容 。 





口 为 何 直接 修改 状态 的 做 法 不 对 ， 























11.1 用 prop 初始 化 状态 























口 用 prop 初始 化 状态 导致 意外 结果 的 场景 。 

还 会 损伤 性 能 。 

口 如 何 选择 正确 的 key 属性 来 协助 一 致 性 比较 器 更 好 地 工作 。 
口 为 何在 DOM 元 素 上 展开 props 对 象 不 可 取 ， 以 及 有 哪些 奉 代 做 法 。 


























在 本 节 中 , 我 们 将 探究 为 何 用 父 组 件 传 来 的 prop 初始 化 状态 往往 是 一 种 反 模 式 。 这 里 用 了 往 
往 一 词 , 是 因为 接 下 来 我 们 会 看 到 ， 只 要 清楚 理解 了 这 种 做 法 的 问题 所 在 , 仍然 可 以 决定 使 用 它 。 











最 好 的 学 习 方式 之 一 就 是 阅读 代码 ， 因 此 我 们 将 创建 一 个 简单 组 件 ， 用 + 按钮 递增 计数 器 。 


以 类 的 形式 实现 组 件 : 


class Counter extends React .Component 


它 的 constructor 方法 用 count 


constructor(props) { 
super (props) 


this.state = { 





属性 初始 化 状态 ， 同 时 绑 害 屋 








EE 件 处 理 胡 : 
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count : props.count, 


} 


this.handleClick = this.handleClick.bind(this) 


点 击 事件 处 理 器 的 实现 很 简单 : 为 当前 计数 值 加 1， 再 将 结果 保存 到 状态 。 


handleClick() { 
this.setState({ 
count: this.state.count + 1, 
} 
} 


最 后 ， 在 render 方法 中 声明 由 当前 计数 值 和 递增 按钮 组 成 的 输出 结构 : 


render() { 
return ( 
<div> 
{this.state.count} 
<button onClick={this.handleClick}>+</button> 
</div> 
) 
} 


现在 泻 染 该 组 件 ， 将 count 属性 设 为 1: 

<Counter count={1} /> 

组 件 按 预期 工作 了 : 每 次 点 击 + 按 钮 都 会 递增 当前 值 。 那 么 这 有 什么 问题 呢 ? 
两 个 主要 错误 是 : 

口 我 们 违背 了 单一 数据 源 原则 ; 

口 传 给 组 件 的 count 属性 发 生变 化 时 ， 状 态 不 会 相应 地 更 新 。 














如 果 用 React 开发 者 工具 审查 Counter 元 素 , 那 么 我 们 会 发 现 Props 和 state 保存 的 值 相同 : 


<Counter> 

Props 
count: 1 

State 
count: 1 





这 样 就 无 法 准确 判断 组 件 使 用 了 哪个 值 并 将 其 展示 给 用 户 了 。 
更 糟糕 的 是 ， 点 击 + 按钮 会 导致 两 者 不 一 样 : 


<Counter> 

Props 
count: 1 

State 
count: 2 
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此 时 我 们 可 以 推断 , 第 二 个 值 表示 当前 计数 值 ， 然而 这 很 不 明显 ,还 可 能 导致 意外 行为 或 者 
向 树 下 传递 错误 值 。 

第 二 个 问题 在 于 React 如 何 创建 并 初始 化 类 。 创 建 组 件 时 只 会 调用 一 次 类 的 constructor 
方法 。 

Counter 组 件 读 取 了 count 属性 的 值 ， 再 将 它 保 存在 状态 中 。 如 果 属 性 值 在 应 用 的 生命 周 
期 内 发 生变 化 ( 比方 说 变 成 10 )， 那 么 counter 组 件 永远 不 会 使 用 这 个 新 值 ， 因 为 它 已 经 完成 
初始 化 了 。 这 使 得 组 件 状态 变 得 不 连贯 ， 这 种 情况 很 不 理想 ， 也 很 难 调试 。 

如 果 我 们 真 的 想 要 用 属性 值 初始 化 组 件 ， 并 且 可 以 肯定 这 些 值 未 来 不 会 改变 呢 ? 

这 种 情况 下 ， 最 好 阐明 这 种 做 法 的 用 意 ， 并 为 属性 起 一 个 能 清楚 表达 含义 的 名 称 ， 如 
initialCounto 举例 来 说 ， 按 以 下 方式 修改 Counter 组 件 的 constructor 方法 : 



































constructor(props) { 
super (props) 


this.state = { 
COUNt: PDIrops. initialCount.; 


} 


this.handleClick = this.handleClick.bind(this) 
} 


然后 按 以 下 方式 使 用 它 : 





<Counter initialCount={1} /> 


上 述 代码 清晰 地 表明 了 父 组 件 只 能 通过 一 种 方式 初始 化 计数 器 ， 以 后 为 initialCount 属 
性 赋 任 何 值 都 会 被 忽略 。 


11.2 ”修改 状态 


React 提供 了 非常 清晰 直观 的 API 来 修改 组 件 的 内 部 状态 。setstate 方法 可 以 告诉 库 我 们 
想 要 如 何 修改 状态 。 一 旦 状态 完成 更 新 ，React 会 重新 泻 染 组 件 ， 我 们 可 以 通过 this.state 属 
性 访问 新 状态 。 就 是 这 么 简单 。 

然而 有 时 我 们 会 犯错 ,试图 直接 修改 状态 对 象 ， 这 会 对 组 件 的 连贯 性 和 性 能 造成 严重 后 果 。 

首先 ， 如 果 不 通过 set state 修改 状态 ， 则 会 出 现 两 种 糟糕 的 情况 : 


口 状态 改变 不 会 触发 组 件 重 演 染 ; 
口 以 后 无 论 何 时 调用 setstate， 之 前 修改 的 状态 都 会 泻 染 到 页 面 上 。 
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回 到 计数 需 示 例 中 ， 修 改 点 击 事件 处 理 融 : 


handleClick() { 
this.state.count++ 


} 


此 时 点 击 + 按钮 不 会 影响 浏览 右 中 演 染 的 值 ， 但 如 果 用 React 开发 者 工具 查看 组 件 ， 会 发 现 
状态 的 值 已 经 正确 更 新 。 这 就 打破 了 状态 的 连贯 性 ,很 显然 ,我 们 并 不 希望 应 用 出 现 这 种 情况 。 


如 果 你 这 样 做 是 因为 失误 ， 只 要 简单 地 用 setstate API 来 修复 即 可 ; 但 如 果 你 是 故意 这 样 
做 ， 比 如 为 了 避免 组 件 重 泻 染 ， 最 好 重新 思考 一 下 组 件 的 架构 。 


第 3 章 中 曾经 提 过 ， 使 用 状态 对 象 的 原因 之 一 就 是 保存 render 方法 所 需要 的 值 。 


直接 修改 状态 引发 的 第 二 个 问题 是 , 无 论 组 件 的 其 他 部 分 何 时 调用 setstate， 之 前 修改 的 
状态 都 会 演 染 到 页 面 上 ， 这 很 出 乎 意料 。 










































































举例 来 说 ， 继 续 修 改 counter 组 件 ， 为 它 添加 以 下 按钮 ， 点 击 后 在 状态 中 新 建 foo 属性 : 
<button onClick={() => this.setState({ foo: 'bar' })}> 
Update 
</button> 
我 们 可 以 看 到 ， 点 击 + 按 钮 不 会 产生 任何 视觉 效果 ,但 只 要 点 击 Update 按钮 ， 浏 览 器 中 的 








计数 值 就 会 突然 跳 变 ， 显 示 出 当前 状态 中 隐藏 的 计数 值 。 
这 种 不 受 控制 的 行为 也 是 我 们 想 要 极力 避免 的 。 


最 后 非常 重要 的 一 点 是 ， 直 接 修改 状态 会 严重 影响 性 能 。 为 了 展示 这 种 行为 ， 我 们 将 创建 
一 个 新 组 件 ， 它 和 我 们 在 第 9 章 中 学 习 key 属性 与 Purecomponent 的 用 法 时 创建 的 列表 组 件 
很 相似 。 


使 用 Purecomponent 时 ， 直 接 修改 状态 值 会 带 来 负面 影响 。 我 们 通过 创建 以 下 List 组 件 
来 理解 这 个 问题 : 





















































class List extends React .PureComponent 
在 constructor 方法 中 初始 化 带 有 两 个 事项 的 列表 ， 同 时 绑 定 事件 处 理 带 : 


constructor(props) { 
super (props) 








this.state = { 
items: ['foo', 'bar'], 


} 


this.handleClick = this.handleClick.bind(this) 
} 


214 第 11 章 需要 避免 的 反 模式 





点 击 处 理 咒 非常 简单 一 一 它 往 数组 中 推 入 新 元 素 , 再 将 数组 设 回 状态 ( 马上 我 们 就 会 看 到 为 
何 这 种 做 法 是 错误 的 ): 


handleClick() { 
this.state.items.push('baz') 





this.setStatel(lt{ 
items: this.state.items, 
} 
} 


最 后 ， 在 render 方法 中 显示 列表 的 当前 长 度 ， 并 声明 触发 事件 处 理 带 的 按钮 : 


render() { 
return ( 
<div> 
{this.state.items.length} 
<button onClick={this.handleClick}>+</button> 
</div> 
) 
下 


查看 上 述 代 码 ， 我 们 可 能 觉得 没有 任何 问题 ; 但 如 果 在 浏览 器 中 运行 组 件 ， 就 会 注意 到 点 
击 + 按 钮 不 会 更 新 列表 的 长 度 值 。 
此 时 只 要 用 React 开发 者 工具 检查 组 件 的 状态 ， 就 会 发 现 内 部 状态 已 经 更 新 ， 但 没有 触发 重 


泻 染 : 




















<List> 
State 
items: Array[3] 
0: "foo" 
1: "bar" 
2: "baz" 


出 现 这 种 不 连贯 体验 的 原因 在 于 我 们 没有 提供 一 个 新 数组 ， 而 是 直接 修改 了 原 有 数组 。 


实际 上 ， 往 数组 中 推 人 新 元 素 不 会 创建 新 的 数组 。 PureComponent 通过 检查 组 件 的 prop 和 
状态 是 否 改变 来 判断 要 不 要 更 新 , 但 本 例 前 后 两 次 传递 了 相同 的 数组 。 这 种 行为 一 开始 会 令 人 觉 
得 违反 直觉 ， 特 别 是 你 不 熟悉 不 可 变数 据 结 构 时 。 


正确 的 做 法 应 该 是 始终 将 新 值 赋 给 state 属性 ， 这 个 问题 很 好 解决 ， 只 要 按 以 下 方式 修改 
List 组 件 的 点 击 处 理 器 即 可 : 


handleClick() { 
this.setStatel(lt{ 
items: this.state.items.concat ('baz'), 
} 
} 
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数组 的 concat 函数 会 将 新 元 素 拼 接 到 原 有 数组 上 , 然后 返回 新 的 数组 。 这 样 Purecomponent 
就 会 发 现状 态 中 有 了 新 数组 ， 然 后 正确 地 重新 演 染 。 
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第 9 章 中 介绍 性 能 和 一 致 性 比较 右 时 ,我 们 学 习 了 如 何 用 key 属性 帮助 React 判断 更 新 DOM 
的 最 优 路 径 。 

因为 key 属性 唯一 标识 了 DOM 中 的 某 个 元 素 ， 所 以 React 用 其 判断 元 素 是 否 为 新 的 ， 以 及 
组 件 属性 和 状态 改变 时 是 否 要 更 新 元 素 。 

使 用 key 始终 是 很 好 的 做 法 ， 在 没有 用 它 的 情况 下 ，React 会 在 控制 台 给 出 警告 ( 开发 模型 
下 )。 然而 key 的 使 用 没 那么 简单 ; 用 不 同 的 值 作为 key 有 很 大 差别 。 实 际 上 ， 某 些 情 况 下 错误 
的 key 会 引发 无 法 预料 的 行为 。 本 节 将 会 介绍 其 中 一 个 示例 。 


我 们 再 来 创建 一 个 List 组 件 : 






























































class List extends React .PureComponent 


在 constructor 方法 中 初始 化 items 数组 ， 并 为 组 件 绑 定 事件 处 理 器 ; 


Nn 
T 





constructor(props) { 
super (props) 


this.state = { 
items: ['foo', 'bar'], 


} 


this.handleClick = this.handleClick.bingd(this) 
} 


点 击 事件 处 理 器 的 实现 与 上 一 节 中 的 稍 有 不 同 ， 因 为 这 次 我 们 要 在 列表 顶部 搬 人 新 元 素 : 


handleClick() { 
const items = this.state.items.slice!() 
items.unshift('baz') 





this.setState({ 
items, 
} 
} 


最 后 ， 在 render 方法 中 声明 列表 ， 添 加 + 按钮 用 于 在 列表 项 部 添加 baz: 


render() { 
return ( 
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<div> 


ly 
{this.state.items.map( (item, 


<11 key={index}>{item}</1i> 


index) => ( 


上 
</ul> 
<button onClick={this.handleClick}>+</button> 


</div> 
) 
jl 
在 浏览 需 内 运行 组 件 ， 结 果 一 切 正常 : 点 击 + 按 钮 会 在 列表 项 部 插 和 人 新 元 素 。 不 过 我 们 接着 
进行 一 个 试验 。 
按 以 下 方式 修改 render 方法 ,在 每 个 列表 项 后 添加 一 个 输入 框 。 输 入 框 用 于 编辑 各 项 内 容 ， 





从 而 更 容易 理解 问题 所 在 : 


render() { 
return ( 
<div> 
<ul> 
{this.state.items.map((item, index) => ( 
<li key={index}> 
{item} 
<input type="text" /> 
</1i> 
) ) } 
区 
<button onClick={this.handleClick}>+</button> 
</div> 


) 
} 


再 次 在 浏览 器 内 运行 组 件 ， 将 每 项 的 值 复制 到 输入 框 中 ， 然 后 点 击 + 按钮 ， 此 时 就 会 出 现 意 











外 行为 。 
如 以 下 截图 所 示 , 原 有 的 列表 项 向 下 移 了 一 位 , 但 输入 框 元 素 的 位 置 保持 不 变 ， 因 此 它们 的 





值 和 列表 项 不 再 匹配 了 : 
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@@ React App 


所 CE，gQ@O Ilocalhost:300 


党 


Welcome to React 














为 了 型 清 并 理解 出 现 这 个 问题 的 原因 ， 我 们 需要 安装 Perf 插件 并 将 它 导 入 组 件 : 








import Perf from 'react-addons-perf' 


接着 用 两 个 生命 周期 钩子 记 录 React 操 作 DOM 的 信息 ， 并 打印 到 控制 台中 : 


componentWillUpdate() { 
Perf.start() 
} 








componentDidUpdate() { 
Perf.stop() 
Perf .PrintOoperations () 


} 


运行 组 件 ， 并 点 击 + 按钮 ， 检 查 控 制 台 应 该 就 能 找到 答案 了 。 


























我 们 发 现 React 并 没有 在 列表 项 部 插入 新 元 素 ， 而 是 交换 两 个 已 有 元 素 的 文本 ， 并 将 最 后 





一 项 当 作 新 的 插入 列表 底部 。 出 现 这 种 行为 的 原因 是 , 我 们 将 map 函数 的 数组 索引 用 作 了 key 











实际 上 ， 数 组 索引 始终 从 0 开始 ， 即 便 在 列表 项 部 推 信 了 新 元 素 ，React 也 会 认为 我 们 修改 





了 两 个 已 有 元 素 的 值 ， 并 在 索引 为 2 的 位 置 添加 了 新 元 素 。 这 种 行为 与 没有 用 key 属性 时 一 模 


一 样 











(e) 
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这 种 模式 很 常见 ， 因 为 我 们 会 认为 提供 任何 形式 的 key 都 是 最 佳 做 法 ， 但 实际 并 非 如 此 。 
key 的 值 必须 唯一 旦 稳定 ， 它 只 能 标识 唯一 一 项 数据 。 

















要 想 解决 这 个 问题 可 以 用 各 项 的 值 作为 key， 前 提 是 它们 在 整个 列表 中 不 会 重复 , 或 者 也 
可 以 创建 唯一 标识 符 。 


11.4 在 DOM 元 素 上 展开 props 对 象 


只 


6 
Hls 


Dan Abramov 最 近 将 一 种 常见 做 法 称 作 反 模 式 ， 在 React 应 用 中 这 样 做 会 触发 控制 台中 的 














这 个 技巧 在 社区 中 广 为 使 用 ， 我 个 人 也 在 真实 项 目 中 多 次 见 到 。 我 们 
props 对 象 ， 以 避免 手动 编写 每 个 属性 ， 如 下 所 示 : 








辣 - 刘 人 


常常 会 在 元 素 上 展开 





<Component {...props} /> 
这 种 写法 可 以 正常 运行 ， 它 会 被 Babel 转译 为 以 下 代码 : 


React .createElement (Component, props); 





然而 ， 当 在 DOM 元 素 上 展开 props 对 象 时 ， 就 会 有 添加 未 知 HTML 属性 的 风险 ,这 是 很 糟 
糕 的 做 法 。 




















问题 不 仅 和 展开 操作 符 有 关 , 逐个 展开 非 标准 属性 会 导致 相同 的 问题 和 警告 。 因 为 展开 操作 
符 隐藏 了 我 们 所 要 展开 的 属性 ， 所 以 很 难 判断 具体 向 元 素 传递 了 什么 。 


演 染 以 下 组 件 ， 这 个 基本 操作 就 会 触发 控制 台中 的 警告 


const Spread = () 


警告 信息 如 下 所 示 : 


=> <div foo="bar" /> 


Unknown prop ‘foo. on <div> tag. Remove this prop from the element 


(<div> 标 签 包含 未 知 的 foo 属性 ， 请 从 元 素 上 移 除 它 ) 
因为 foo 





属性 对 于 aiv 元 素来 说 是 无 效 的 。 


属性 并 移 除 ， 如 果 用 了 展开 操作 符 


const Spread = props => <div {...props} /> 


我 们 无 法 控制 父 组 件 会 传 来 哪些 属 


如 上 文 所 说 ， 很 容易 在 本 例 中 找到 传递 的 











， 如 下 所 示 : 


性 


Lo 





Pa 





如 果 按 以 下 方式 使 用 组 件 : 


<Spread className="foo" /> 
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没有 任何 问题 。 
但 如 果 按 以 下 方式 的 话 : 


<Spread foo="bar" className="baz" /> 
React 就 会 给 出 警告 ， 因 为 我 们 在 DOM 元 素 上 设置 了 非 标准 属性 。 


解决 这 个 问题 的 其 中 一 种 方法 就 是 创建 一 个 名 为 somProps 的 属性 , 可 以 在 组 件 上 安全 地 展 
开 它 ， 因 为 我 们 显 式 声明 了 它 包 含有 效 的 DOM 属性 。 


例如 ， 我 们 可 以 按 以 下 方式 修改 spread 组 件 : 


























const Spread = props => <div {...props.domProps} /> 
用 法 如 下 所 示 : 
<Spread foo="bar" domProps={{ className: 'baz' }} /> 


正如 我 们 多 次 见 到 的 那样 ， 在 React 中 采取 显 式 做 法 始终 是 很 好 的 实践 。 

















11.5 小结 
了 解 所 有 的 最 佳 实践 永远 不 会 错 , 但 知道 反 模式 有 时 能 帮助 我 们 避免 走 错 方向 。 最 重要 的 是 ， 
学 习 某 些 技巧 被 看 作 糟 糕 实践 的 原因 有 助 于 我 们 理解 React 的 工作 原理 ， 并 掌握 它 的 高 效用 法 。 
本 章 介 绍 了 四 种 不 利于 Web 应 用 的 性 能 和 行为 的 组 件 用 法 。 
对 每 种 用 法 ,我 们 用 示例 重 现 了 问题 ， 并 提供 了 具体 的 修复 方案 。 


我 们 学 习 了 为 何 用 属性 初始 化 状态 会 导致 两 者 不 一 致 ， 还 发 现 了 直接 修改 状态 会 损伤 性 能 。 
另外 ， 我 们 还 了 解 到 错误 的 key 属性 会 给 一 致 性 比较 算法 带 来 负面 效果 。 最 后 ， 我 们 学 习 了 在 
DOM 元 素 上 展开 非 标准 属性 被 视 为 反 模式 的 原因 。 






























































未 来 的 行动 











React 是 近 几 年 出 现 的 最 令 人 惊叹 的 库 之 一 ， 不 仅 因 为 它 拥 有 众多 强大 的 特性 ， 更 因为 一 个 
生态 系统 围绕 它 发 展 起 来 了 。 


追随 React 社 区 十 分 激动 人 心 ， 并 且 能 启发 我 们 的 灵感 : 每 天 都 可 以 学 习 和 使 用 新 的 项 目 和 
工具 。 不 仅 如 此 ,你 还 可 以 参加 很 多 会 议和 线 下 上 聚会 ,与 其 他 人 交流 ， 并 结识 新 朋友 。 此 外 ， 还 
可 以 阅读 大 量 博文 ， 以 提升 自己 的 技能 并 学 习 更 多 知识 。 总 之 ,你 能 找到 很 多 途径 成 为 更 好 的 开 
发 人 员 。 

















React 与 其 生态 系统 十 分 鼓励 最 佳 实践 和 开源 ， 这 对 开发 人 员 未 来 的 职业 生涯 非常 有 利 。 
本 章 包 含 如 下 内 容 。 

口 如 何 通 过 提交 问题 和 发 起 pull request 为 React 库 做 贡献 。 

口 为 何 回馈 社区 以 及 分 享 自己 的 代码 很 重要 。 

口 发 布 开源 代码 时 需要 牢记 的 重点 。 

口 如 何 发 布 npm 包 和 使 用 语义 化 版 本 号 。 

















12.1 为 React 做 贡献 


使 用 React 一 段 时 间 后 ， 人 们 往往 会 想 着 为 这 个 库 做 些 贡 献 。React 是 开源 项 目 ， 这 意味 着 
它 的 源 代 码 是 公开 的 ， 签 署 了 贡献 者 许可 协议 〈contributor license agreement，CLA ) 的 任何 人 都 
能 参与 修复 bug、 编 写 文档 ， 其 至 添加 新 特性 。 











可 以 搜索 “Contributing to Facebook Projects” 来 阅读 完整 的 CLA 条 款 。 


举例 来 说 ， 假 设 用 React 开发 应 用 时 发 现 了 bug， 应 该 怎么 做 呢 ? 首先 ， 也 是 最 重要 的 一 点 
， 创 建 一 个 简单 的 示例 来 重 现 问题 。 这 一 步 可 以 用 React 团队 提供 的 现成 的 JSFiddle 模板 : 





并 


https://jsfiddle.net/reactjs/69z2wepo/ 
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这 样 做 主要 有 以 下 两 个 好 处 : 

口 可 以 帮 你 百分之百 地 确定 这 是 React 的 bug， 而 不 是 你 自己 的 应 用 代码 的 问题 ; 

口 有 助 于 React 团队 快速 理解 问题 ， 无 须 深 入 研究 你 的 应 用 代码 ， 从 而 可 以 加 快 修复 过 程 。 
JSFiddle 模板 用 的 是 最 新 版 的 React, 这 一 点 很 重要 , 因为 如 果 你 发 现 的 是 旧版 React 的 bug， 

那么 最 新 版 本 可 能 已 经 修复 了 这 个 bug。 反 之 亦 然 ， 如 果 你 发 现 最 新 版 有 问题 ， 而 旧版 没有 , 那 

么 修复 该 bug 的 优先 级 就 会 很 高 ， 因 为 它 可 能 会 影响 大 量 用 户 。 


准备 好 展示 问题 的 示例 后 ， 就 可 以 在 GitHub 上 提交 问题 : 




















https://github.com/facebook/react/issues/new 


你 会 看 到 ， 提交 问题 的 页 面 已 经 预 填 了 一 些 引 导 提 示 , 其 中 一 条 是 提交 示例 的 最 低 要 求 。 其 
他 的 内 容 有 助 于 你 解释 问题 ， 并 描述 当前 和 期 望 的 行为 。 

参与 或 贡献 代码 前 ， 最 好 阅读 一 下 Facebook 行为 准则 ( https://code.facebook.com/codeofconduct )。 
该 文档 列 出 了 所 有 社区 成 员 共 同期 望 并 且 每 个 人 都 应 该 遵守 的 良好 行为 。 

提交 问题 后 ， 需 要 等 待 某 个 核心 贡献 者 审阅 ， 然 后 他 会 告诉 你 React 团队 决定 如 何 处 理 这 个 
bug。 根 据 问 题 的 严重 程度 ， 他 们 可 能 会 自己 修复 ， 也 可 能 请 求 你 来 修复 。 

在 第 二 种 情况 下 ， 你 可 以 fork 这 个 GitHub 仓库 ， 然 后 编写 代码 解决 问题 。 请 遵循 代码 风格 
指南 ， 并 为 补丁 编写 全 面 的 测试 。 还 有 一 点 很 关键 : 确保 新 代码 能 通过 现 有 的 所 有 测试 ， 避 免 向 
代码 库 引 入 新 的 错误 。 

问题 修复 并 通过 所 有 测试 后 ， 就 可 以 发 起 pullrequest， 然 后 等 待 核心 团队 成 员 审 核 代 码 。 他 
们 可 能 会 决定 合并 ， 也 可 能 要 求 你 进行 一 些 修 改 。 

如 果 没 有 发 现 bug， 但 又 想 为 这 个 项 目 做 一 些 贡献 ， 那 么 可 以 在 GitHub ( https://github.com/ 
facebook/react/labels/go0d%20first%20issue ) 上 查看 带 有 good first issue 标签 的 问题 。 

这 是 开始 贡献 的 一 种 绝 佳 方式 ， 其 妙 处 在 于 ，React 团队 为 每 个 贡献 者 (尤其 是 新 人 ) 都 提 
供 了 参与 项 目的 机 会 。 

0 果 发 现 某 个 带 有 good first issue 标签 的 问题 还 没有 被 其 他 人 认领 ， 那 么 你 可 以 在 它 的 页 面 
上 评论 ， 表明 你 有 兴趣 修复 它 。 随 后 ， 核 心 成 员 就 会 联系 你 。 在 开始 编写 代码 前 ,请 和 他 们 讨论 
你 的 思路 以 及 解决 方式 ， 以 免 多 次 重 写 代码 。 

改进 React 的 男 一 种 方式 是 添加 新 特性 。 值 得 一 提 的 是 ，React 团队 有 自己 的 计划 ， 核 心 成 

员 负 责 设计 并 选择 主要 特性 。 


妇 
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果 对 React 的 发 展 路 线 感 兴趣 ， 那 么 你 可 以 从 GitHub (https://github.com/facebook/react/ 
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issues?q=is:open+is:issue+label:%22big+picture%22 ) 上 之 有 big picture 标签 的 问题 中 了 解 部 分 
信息 。 

也 就 是 说 , 如 果 对 React 应 该 新 增 的 特性 有 好 的 建议 , 那么 你 可 以 立刻 提交 问题 , 并 与 React 
团队 交流 。 在 那 之 前 ， 最 好 不 要 花 时 间 编 写 代 码 和 发 起 pullrequest， 因 为 你 构想 的 特性 可 能 不 符 
合 React 团队 的 计划 ， 也 可 能 与 他 们 正在 开发 的 其 他 功能 有 冲突 。 























12.2 分 发 代码 


为 React 生态 系统 做 贡献 并 不 只 是 向 React 仓库 提交 代码 。 要 想 回馈 社区 和 帮助 其 他 开发 人 
员 ， 你 可 以 开发 软件 包 、 摆 写 博 文 、 在 Stack Overflow 回答 问题 ， 还 可 以 做 很 多 其 他 事情 。 


举例 来 说， 假如 你 开发 了 一 个 可 以 解决 复杂 问题 的 React 组件， 你 认为 其 他 开发 人 员 也 可 以 
从 中 受益 ,他们 可 以 直接 使 用 这 个 组 件 ,而 不 需要 花 时 间 研究 自己 的 方案 。 最 佳 做 法 是 将 它 发 布 
到 GitHub 上 , 允许 每 个 人 查看 和 使 用 。 不过, 在 GitHub 上 发 布 代 码 只 是 整个 大 流程 中 的 一 小 步 ， 
它 也 伴随 着 一 些 责任 。 因 此 ， 你 心里 应 该 清楚 地 认识 到 这 种 选择 背后 的 理由 。 


这 样 做 的 动力 之 一 是 , 你 可 能 想 要 通过 贡献 代码 来 提升 自己 的 开发 技能 。 一 方面 ,共享 代码 
需要 你 遵循 最 佳 实践 ,编写 更 好 的 代码 ; 另 一 方面 ,代码 要 接受 其 他 开发 人 员 的 反馈 和 评论 。 这 
是 一 个 很 好 的 机 会 ， 你 可 以 接受 建议 并 改进 代码 ， 使 它 更 完美 。 


除了 与 代码 本 身 相关 的 建议 以 外 , 将 代码 发 布 到 GitHub 还 能 从 他 人 的 想法 中 得 到 很 多 启发 。 
你 可 能 只 考虑 用 自己 的 组 件 解决 单一 问题 ， 而 其 他 开发 人 员 或 许 会 以 不 同 的 方式 来 使 用 它 , 从 而 
发 现 新 的 用 途 。 此 外 ,他 们 可 能 需要 新 的 特性 ， 并 可 以 帮助 你 实现 ,这 样 包括 你 在 内 的 每 个 人 都 
能 从 中 受益 。 合 作 开发 软件 可 以 极 大 地 提升 你 的 技能 、 改 进 你 的 软件 包 , 这 也 是 我 对 开源 充满 信 
心 的 原因 所 在 。 


开源 还 可 以 为 你 提供 与 全 世界 聪明 热情 的 开发 人 员 交 流 的 绝 佳 机 会 ,与 拥有 不 同 背 景 和 技能 
的 新 伙伴 一 起 紧密 合作 是 开放 思维 和 提升 自己 的 最 佳 方式 之 一 。 


共享 代码 也 带 来 了 一 些 责 任 ， 而 且 可 能 占据 你 大 量 时 间 。 实 际 上 ， 开 放 代码 让 他 人 使 用 后 ， 
你 就 要 负责 维护 它 。 


维护 代码 仓库 需要 付出 ， 随 着 它 变 得 越 来 越 流行 ， 用 户 会 越 来 越 多 ， 疑 问 和 问题 也 会 大 大 增 
多 。 举例 来 说 ,开发 人 员 会 遇 到 bug 并 提交 问题 ， 此 时 你 就 要 全 部 浏览 并 尝试 重 现 问题 。 如 果 问 题 
确实 存在 ， 那 么 你 就 需要 编写 补丁 并 发 布 新 的 版 本 。 你 还 会 收 到 其 他 开发 人 员 发 起 的 pull request， 
其 中 的 代码 可 能 又 长 又 复杂 。 即 便 如 此 ， 你 仍然 要 审查 它们 。 


如 果 你 决定 邀请 他 人 共同 维护 项 目 , 并 帮助 你 处 理 问 题 和 pull request, 那么 你 就 要 在 合作 过 
程 中 分 享 自己 的 观点 ,并 和 他 人 共同 决策 。 牢 记 这 一 点 ， 接 着 我 们 来 了 解 一 些 优秀 实践 ,它们 可 
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以 帮助 你 更 好 地 维护 代码 仓库 ， 同 时 避免 一 些 常 见 的 陷阱 。 


首先 ， 如 果 想 要 发 布 React 组 件 ， 那么 你 需要 编写 全 面 的 测试 集 。 对 于 多 人 参与 编写 的 公共 
代码 来 说 ,测试 的 帮助 很 大 ， 理 由 如 下 : 





























口 测试 使 代码 更 稳健 ; 
口 测试 能 帮助 其 他 开发 人 员 理 解 代 码 的 功能 ; 


C= 


口 涡 
口 讽 


试 有 助 于 发 现 新 增 的 代码 缺陷 ; 
试 让 参与 编写 代码 的 其 他 开发 人 员 更 有 信心 。 


第 二 点 ， 添 加 描述 组 件 的 README 文件 ， 其 中 包括 使 用 示例 、API 文 档 以 及 可 用 的 prop。 
该 文件 对 软件 包 的 用 户 很 有 帮助 ， 而 且 也 能 避免 人 们 提交 间 题 询问 库 的 工作 原理 和 用 法 。 


另外 ,在 仓库 中 添加 LICENSE 文件 也 很 重要 ， 它 可 以 提醒 人 们 如 何 恰当 地 使 用 你 的 代码 。 
GitHub 提供 了 大 量 现成 的 模板 供 你 选择 。 


你 应 该 尽量 减 小 软件 包 并 少 用 依赖 。 在 决定 是 否 使 用 某 一 个 库 时 , 开发 人 员 往 往 会 仔细 考虑 
它 的 大 小 。 记 住 ， 大 软件 包 会 给 性 能 造成 负面 影响 。 


不 仅 如 此 , 依赖 太 多 第 三 方 库 会 带 来 问题 , 因为 其 中 的 某 些 库 可 能 有 bug 或 者 不 再 有 人 维护 。 


在 分 享 React 组 件 时 ， 样 式 方面 的 决策 非常 麻烦 。 分 享 JavaScript 代码 十 分 简单 ， 而 一 旦 涉 
及 CSS， 就 没 那 么 容易 了 。 其实, 你 可 以 选择 许多 不 同 的 方式 来 提供 样式 : 可 以 在 包 内 添加 CSS 
文件 ， 也 可 以 使 用 行内 样式 。 最 重要 的 一 点 是 ，CSS 作用 于 全 局 ， 导 入 组 件 后 的 一 般 类 名 可 能 会 
与 项 目 中 已 有 的 类 名 发 生 冲 突 。 

最 佳 选择 是 尽量 少 提供 样式 , 允许 用 户 自 由 配置 组 件 。 这 样 一 来 , 开发 人 员 就 更 愿意 使 用 它 ， 
因为 这 能 和 他 们 自己 的 技术 方案 相 匹 配 。 

为 了 向 他 人 展示 你 的 组 件 可 以 非常 灵活 地 进行 配置 , 可 以 在 仓库 中 添加 一 些 示 例 , 以便 他 人 


更 容易 理解 组 件 的 工作 原理 ， 以 及 它 接受 哪些 prop。 你 也 可 以 用 这 些 示 例 测试 新 版 组 件 , 并 查看 
是 否 有 意外 的 破坏 性 改动 。 


正如 我 们 在 第 3 章 中 曾 见 到 的 ，React Storybook 这 类 工具 可 以 创建 现成 的 风格 指南 ， 不 但 
维护 起 来 更 容易 ， 而 且 人 允许 用 户 更 方便 地 浏览 和 使 用 软件 包 。 


Airbnb 的 react-dates 组 件 是 一 个 配置 化 程度 很 高 的 完美 示例 ， 它 用 Storybook 展示 了 
组 件 的 所 有 状态 。 你 可 以 将 它 的 代码 仓库 作为 绝 佳 的 范例 ， 以 学 习 如 何在 GitHub 上 发 布 React 
组 件 。 


Airbnb 的 开发 人 员 用 Storybook 展示 了 组 件 的 不 同 选 项 ， 如 下 所 示 : 
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React Storybook 


€ 


C © airbnb.io 


REACT STORYBOOK % 


Start Date 


DateRangePicker 
default 
hidden with display: none 
as part of a form 
single month 
anchored right 
vertical 
vertical anchored right 
horizontal with portal 
horizontal with fullscreen portal 
vertical with full screen portal 
with clear dates button 


reopens DayPicker on clear 
dates 


does not autoclose the 
DayPicker on date selection 


一 End Date 


ACTION LOGGER 























最 后 一 点 很 重要 : 你 可 能 不 只 是 想 要 分 享 代码 ， 还 想 要 发 布 软件 包 。npm 是 JavaScript 最 流 
行 的 包 管理 器 ， 本 书 就 用 它 安装 了 各 种 包 和 依赖 。 


我 们 将 在 下 一 节 中 介绍 ， 用 npm 发 布 新 软件 包 其 实 很 简单 。 





人 bE 
HEF 


除了 npm, 有 些 开 发 人 员 可 


要 将 你 的 组 件 用 作 全 局 依赖 , 而 且 不 想 通 过 包 管 理 器 来 使 用 。 





第 1 章 中 曾经 提 过 ，React 的 使 用 很 简单 ， 只 要 添加 一 个 <script> 标 签 ， 将 其 路 径 指向 





https://unpkg.com 即 可 。 为 你 的 用 户 提供 


相同 的 安装 选项 很 重要 。 


因此 ， 为 了 提供 全 局 版 本 的 软件 包 ， 你 还 需要 构建 符合 通用 模块 定义 的 版 本 。 用 Webpack 


很 容易 做 到 这 一 点 : 在 配置 文件 的 输出 部 分 设置 1ibraryTarget 
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属性 即 可 。 








下 


为 开发 人 员 提 供 软件 包 的 最 流行 做 法 就 是 将 它 发 布 到 npm， 即 Node.js 的 包 管 理 器 。 


本 书 中 的 所 有 示例 都 用 到 它 了 , 你 也 看 到 了 , 用 它 安装 包 非常 简单 : 只 要 执行 npm install 
< 包 名 > 即 可 。 你 可 能 还 不 了 解 的 是 ， 用 它 发 布 软件 包 也 非常 简单 。 
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首先 ， 进 入 空 目 录 ， 并 在 终端 中 执行 以 下 命令 : 
npm init 


此 时 会 新 建 package.json 文件 ， 并 显示 几 个 问题 。 第 一 个 问题 会 问 你 包 名 是 什么 ， 它 默认 是 
文件 夹 名 称 , 然后 会 问 版 本 号 。 这 些 信息 最 为 重要 ， 因 为 用 户 安装 并 使 用 软件 包 时 要 靠 包 名 来 引 
用 ; 版 本 信息 可 以 帮 你 安全 地 发 布 新 版 ， 避 免 与 他 人 的 代码 发 生 冲 突 。 


版 本 号 由 三 个 以 点 号 分 隔 的 数字 组 成 , 它们 都 有 各 自 的 含义 。 版 本 号 中 的 最 后 一 个 数字 表示 
补丁 ， 当 库 的 新 版 包含 bug 修复 补丁 时 ， 发 布 到 npm 上 需要 增加 该 数字 。 


中 间 的 数字 表示 次 要 版 本 ， 库 新 增 特性 时 需要 修改 它 ， 并 且 这 些 特性 不 能 破坏 已 有 的 API。 
后 ， 第 一 个 数字 表示 主 版 本 ， 公 开发 布 的 版 本 包括 重大 改动 时 应 该 增加 该 数字 。 


这 种 版 本 命名 方式 称 为 语义 化 版 本 控制 , 它 是 一 种 良好 的 实践 , 能 让 用 户 在 更 新 软件 包 时 更 
放心 。 


包 的 第 一 个 版 本 号 通常 是 0.1.0。 


要 想 发 布 npm 包 ， 必 须 有 npm 账户 ， 在 控制 台中 执行 以 下 命令 即 可 创建 账户 : 
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npm adduser $username 


susername 表示 你 选择 的 用 户 名 。 
有 了 账户 后 ， 就 可 以 执行 以 下 命令 : 





npm publish 
这 时 ，npm 就 会 用 package.json 中 指定 的 包 名 和 版 本 号 注册 一 个 人 口 。 


任何 时 候 要 想 修 改 库 并 发 布 新 版 ， 只 需要 执行 以 下 命令 : 











npm version $type 


stype 可 以 是 补丁 版 本 、 次 要 版 本 或 者 主 版 本 。 这 条 命令 会 自动 修改 package.json 中 的 版 本 
号 ， 如 果 当 前 文件 夹 处 于 版 本 控制 之 下 ， 它 还 会 创建 commit 并 打上 标签 。 


版 本 号 更 新 后 ， 只 要 再 次 执行 npm publish， 用 户 就 可 以 下 载 新 版 了 。 
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在 React 世界 之 旅 的 最 后 一 站 ， 我 们 学 习 了 成 就 React 重要 地 位 的 几 个 方面 : 它 的 社区 与 生 
态 系统 ， 以 及 如 何 才能 参与 其 中 。 
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你 学 习 了 发 现 React 的 bug 时 应 该 如 何 提交 问题 ， 以 及 让 库 的 核心 开发 人 员 更 方便 地 修复 问 
题 需 要 哪些 步骤 。 现 在 ， 你 还 知道 了 开源 代码 的 最 佳 实践 ， 以 及 伴随 而 来 的 好 处 与 责任 。 


最 后 ， 你 学 到 了 在 npm 上 发 布 软件 包 非 常 简单 ， 并 学 习 了 如 何 选择 正确 的 版 本 号 以 避免 破 
坏 他 人 的 代码 。 
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